이 글은 기계 번역의 미러 문서이며, 원본 기사로 바로 이동하려면 여기를 클릭해 주세요.

보기: 11475|회답: 0

[각] Angular 4.x 라우터 링크 명령어

[링크 복사]
게시됨 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 온라인 결제 계약 없는 플러그인을 출시했습니다.
면책 조항:
Code Farmer Network에서 발행하는 모든 소프트웨어, 프로그래밍 자료 또는 기사는 학습 및 연구 목적으로만 사용됩니다; 위 내용은 상업적 또는 불법적인 목적으로 사용되지 않으며, 그렇지 않으면 모든 책임이 사용자에게 부담됩니다. 이 사이트의 정보는 인터넷에서 가져온 것이며, 저작권 분쟁은 이 사이트와는 관련이 없습니다. 위 내용은 다운로드 후 24시간 이내에 컴퓨터에서 완전히 삭제해야 합니다. 프로그램이 마음에 드신다면, 진짜 소프트웨어를 지원하고, 등록을 구매하며, 더 나은 진짜 서비스를 받아주세요. 침해가 있을 경우 이메일로 연락해 주시기 바랍니다.

Mail To:help@itsvse.com