|
|
게시됨 2018. 10. 25. 오후 3:52:29
|
|
|

라우터링크 명령어 소개
RouterLink 명령어는 애플리케이션의 특정 부분에 연결할 수 있게 해줍니다. 링크가 고정 상태라면 다음과 같이 명령어를 사용할 수 있습니다:
동적 값으로 링크 주소를 생성해야 한다면, 경로 구간 배열과 각 구간의 매개변수를 전달할 수 있습니다. 예를 들어, ['/team', teamId, 'user', userName, {details: true}] 배열을 사용하면 /team/11/user/bob에 대한 링크를 생성하고자 합니다; details=true 。
여러 정적 세그먼트를 하나로 병합할 수 있습니다. 예를 들어 ['/team/11/user', userName, {details: true}].
첫 번째 경로 조각은 /, ./, 또는 로 정의할 수 있습니다. / 시작:
- 만약 /로 시작하면 루트는 루트 루트에서 위로 보기 시작합니다
- ./로 시작하거나 사용되지 않으면, 해당 경로는 현재 활성화된 자식 경로에서 위로 조회되기 시작합니다
- 만약 당신이 다음으로 시작한다면: / 시작, 경로는 다음 조회 단계로 이동합니다
쿼리 매개변수와 프래그먼트는 다음과 같은 방식으로 설정할 수 있습니다:
RouterLink 명령어는 위에 설정된 입력 매개변수를 기반으로 다음 링크를 생성합니다: /user/bob#education?debug=true. 또한, queryParamsHandling 속성을 통해 쿼리 매개변수 처리 방식을 선언할 수 있으며, 사용 가능한 옵션은 다음과 같습니다:
- merge - 기존 queryParams을 현재 QueryParams에 merge
- preserve - 현재 queryParams 저장
- 기본값 ('') - 쿼리 매개변수만 사용함
구체적인 사용 예는 다음과 같습니다:
RouterLink 명령어가 자세히 설명되었습니다
RouterLink 명령어 정의
RouterLink 명령 입력 속성
URL과 관련된 쿼리 매개변수를 설정하세요 @Input() queryParams: {[k: string]: any};
해시 조각을 URL에 설정하세요 @Input() 단편: 문자열;
쿼리 매개변수 처리 모드를 설정: 병합, 보존, 기본 설정 @Input() queryParamsHandling: QueryParamsHandling;
조각을 유지할지 여부 집합 @Input() preserveFragment: 불리언;
페이지 탐색을 설정할 때, 기록에 새 상태를 추가할지 여부 @Input() skiplocatio{filter}nChange: boolean;
페이지 내비게이션을 설정할 때, 현재 상태를 기록에서 교체할지 여부 @Input() replaceUrl: boolean;
명령어 매개변수 정보를 설정하세요, 예를 들어 ['/user/bob'] @Input() set routerLink(commands: any[]|string) { 만약 (명령어 != null) { this.commands = Array.isArray(commands) ? 명령: [명령]; } 그렇지 않으면 { this.commands = []; }
}
라우터링크 명령 바인딩
이벤트 바인딩
라우터링크 클래스
@Attribute() @Attribute('attributeName') 데코레이터: 명령어 호스트 요소의 attributeName 속성 이름에 대응하는 속성 값을 얻는 데 사용됩니다.
탭인덱스 tabindex 속성은 탭 키를 탐색에 사용할 때 요소의 탭 키 제어 순서를 지정합니다.
다음 요소들은 탭인덱스 속성을 지원합니다: <a>, <area><button><input><object><select> <textarea> .
tabindex 문법:
라우터링크 클래스
라우터링크 클래스
RouterLinkWithHref 명령어
RouterLinkWithHref 명령어
RouterLinkWithHref 지시문 입력 속성
RouterLinkWithHref 명령어
속성 결속
<a> 태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의합니다. <a> 태그에는 두 가지 중요한 속성이 있습니다:
href - 링크가 연결되는 페이지의 URL 주소를 지정합니다. href 속성을 사용하지 않으면 다운로드, 미디어, rel, target, type 속성 등의 속성을 사용할 수 없습니다.
Target - 링크된 페이지가 브라우저 창에서 어떻게 열리는지 지정하며, 그 매개변수 값은 주로 다음과 같습니다:
_blank - 새로운 브라우저 창에서 대상 문서를 불러오세요.
_parent - 이 목표는 문서를 하이퍼링크가 참조하는 프레임을 포함하는 부모 창이나 프레임 집합에 로드하게 만듭니다. 이 참조가 창이나 최상위 프레임워크에 있다면, 이는 대상 _self과 동등합니다.
_self - 이 타겟의 값은 타겟을 지정하지 않은 모든 라벨의 기본 타겟이며 <a> , 이로 인해 타겟 문서가 동일한 프레임이나 창에서 소스 문서로 로드되고 표시됩니다. 이 목표는 <base> 문서 제목 탭의 target 속성과 함께 사용하지 않는 한 중복되고 불필요합니다.
_top - 이 목표는 문서가 하이퍼링크가 포함된 창을 불러오게 하며, _top 타겟을 사용하면 포함된 모든 프레임을 지우고 전체 브라우저 창에서 문서를 불러옵니다.
이벤트 바인딩
MouseEvent는 사용자가 포인터 장치(예: 마우스)와 상호작용할 때 발생하는 이벤트를 나타내며, 일반적인 이벤트로는 클릭, dblclick, mouseup, mousedown 이벤트가 있습니다. MouseEvent 객체는 사용자가 누른 마우스 버튼을 나타내는 버튼 속성을 포함하며, 가능한 속성 값은 다음과 같습니다:
- 0 - 보통 왼쪽 마우스 버튼을 가리키는 메인 버튼을 누릅니다.
- 1 - 보조 버튼을 누르는데, 보통 마우스 휠을 의미합니다.
- 2 - 두 번째 키를 누르는 것은 보통 오른쪽 마우스 버튼을 의미합니다.
- 3 - 네 번째 버튼을 누르며, 보통 브라우저의 뒤로 가기 버튼을 의미합니다.
- 4 - 다섯 번째 버튼을 누르는데, 보통 브라우저의 앞으로(forward) 버튼을 의미합니다.
왼손잡이 용도로 설정된 마우스의 경우, 키 입력은 정반대입니다. 이 경우 값은 오른쪽에서 왼쪽으로 읽습니다. 위 예제 코드에서는 마우스이벤트 객체의 ctrlKey와 metaKey 속성에도 접근하며, 이 두 속성 외에도 altKey와 shiftKey 속성을 포함하고 있습니다. 이 속성들은 아래에 설명되어 있습니다:
- MouseEvent.ctrlKey - 마우스 이벤트가 트리거될 때 컨트롤 키를 누르면 true로 반환됩니다.
- MouseEvent.metaKey - 마우스 이벤트가 트리거될 때 (Window - ⊞, Mac - ⌘ Command) 키를 누르면 true로 반환됩니다.
- MouseEvent.altKey - 마우스 이벤트가 (Window - alt, Mac - Option, 또는 ⌥) 키를 누르면 true로 반환됩니다.
- MouseEvent.shiftKey - 마우스 이벤트가 트리거될 때 Shift 키를 누르면 true로 반환됩니다.
ctrl키를 누르고 탭을 클릭하면 <a> 현재 URL 주소를 사용해 새 탭 페이지가 생성됩니다. metaKey를 누르고 탭을 클릭하면 <a> 현재 페이지가 새로고침됩니다. 따라서 onClick() 메서드에서는 해당 판단이 수행됩니다.
RouterLinkWithHref 명령어 수명주기
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref 클래스
RouterLinkWithHref 클래스
RouterLinkWithHref 클래스
RouterLinkActive 명령어 소개
RouterLinkActive 지시문은 연결된 경로가 활성화될 때 요소에 CSS 클래스를 추가할 수 있게 해줍니다. 다음 예시를 살펴보세요:
URL 주소가 /user 또는 /user/bob일 때는 활성 링크 클래스가 <a> 태그에 추가됩니다. URL이 변경되면 활성 링크 클래스가 자동으로 태그에서 제거됩니다 <a> . 또한 여러 클래스를 동시에 추가할 수도 있습니다.
라우터LinkActive 명령을 적용할 때, 라우터LinkActiveOptions 매개변수를 사용하여 URL을 어떻게 매칭하는지 설정할 수도 있습니다. 다음과 같습니다:
{exact: true} 매개변수가 설정될 때, 활성 링크 클래스는 URL 주소가 정확히 와 일치할 때만 태그에 추가됩니다 <a> . 또한 템플릿 변수에 RouterLinkActive 인스턴스를 할당하고 명령어 명령어의 isActive 상태를 지시적으로 확인할 수도 있습니다:
마지막으로, RouterLink의 부모 요소에도 RouterLinkActive 명령을 적용할 수 있습니다. 예시는 다음과 같습니다:
위 예시에서 URL이 /user/jim 또는 /user/bob으로 주소가 지정될 때, 해당 요소에 active-link 클래스가 추가됩니다 <div> .
RouterLinkActive 명령어가 자세히 설명되었습니다
RouterLinkActive 명령어 정의
RouterLinkActive 명령 입력 속성
RouterLinkActive 명령 수명주기
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive 클래스
RouterLinkActive 클래스
RouterLinkActive 클래스
|
이전의:여기에는 정말 좋은 기능이 있는데, 돈을 벌 수 있고, 바로 홍보입니다.다음:개인 테스트가 가능한 DZ 온라인 결제 계약 없는 플러그인을 출시했습니다.
|