각형 라우터 - 여러 라우팅 모듈에서 상위 경로를 공유하는 방법

Question

각형 CLI로 각도 응용 프로그램을 만들었지 만 이제 라우터에 문제가 있습니다. 빌드하고 싶은 앱에는 머리말과 꼬리말이 있지만 로그인 페이지처럼 보이지 않는 페이지가 있습니다. 그래서 그것을 필요로하는 페이지를 위해 머리글과 바닥 글을 레이아웃을 공유하고 그렇지 않은 레이아웃을 사용하는 방법이 필요합니다. 이것에 대한 올바른 접근 방법은 무엇입니까?

첫 번째 아이디어는 머리글과 바닥 글이 필요한 다른 모든 경로의 부모가 될 하나의 경로를 갖는 것이지만 여러 라우팅 모듈에서 같은 부모를 공유하는 방법을 찾을 수 없습니다. 문서에서 찾을 수있는 부모 자식 관계를 지정하는 유일한 방법은 경로를 정의 할 때 자식 목록을 사용하는 것이지만 그 다음에는 내가 피하고 싶은 동일한 위치에 정의 된 모든 경로를 가질 필요가 있습니다.

두 번째 아이디어는 보조 경로를 사용하는 것이 었습니다. 콘텐츠 용 기본 콘센트와 머리말 및 꼬리말 용 2 개의 보조 콘센트로 app.component.html을 정의했지만 그 다음에는 기능 라우팅 모듈에서 보조 콘센트에 액세스 할 수 없었습니다 .

세 번째 아이디어는 머리글과 바닥 글이있는 각 페이지에 대해 동일한 구성 요소로 상위 경로를 갖는 것입니다. 이 공유 구성 요소는 머리글과 바닥 글을 지정하지만 문제는 사용자가 다른 기능으로 이동할 때마다 머리글과 바닥 글이 인스턴스화되어 해당 상태를 다시 설정한다는 것입니다.

저는 AngularJS에서 사용하던 ui-router를 사용하여 명명 된 뷰와 공유 부모 상태를 지정하는 기능을 사용하기가 정말 쉽습니다. 나는 여기에 올바른 방향을 가르쳐 주셔서 감사합니다.

Answer 1

이 작품은 마음에 드시겠습니까?

- 애플리케이션 컴포넌트 (라우터 배출구)

(헤더, 풋터 및 하위 라우터 배출구) 부모 구성 요소가

------ 자식 구성 요소가 안에 표시되는 ----

부모 구성 요소의 라우터 콘센트

---- (예, 헤더 또는 바닥 글과 로그인 등) 기타 부품

Answer 2

당신은 당신의 바닥 글 구성 요소 내부의 라우터에 가입 그냥 노선에 기반을 숨길 수 있습니다.

1) 가장 쉬운 해킹 틱 방법은 단순히

footer.component.ts

@HostBinding('style.display') 
display :string = 'block'; 

constructor(private router: Router) {} 

ngOnInit() { 
    this.router.events.subscribe((val) => { 

    if (val instanceof NavigationEnd) { 
    this.display = 'block'; 
    if (val.url == '/hidefooterroute') { 
     this.display = 'none'; 
    } 
    } 
... 

2) 당신이 할 수있는 또 다른 방법은 숨길 것은 경로에서 PARAMS을 고수하는 것입니다 .data를 사용하고 메인 앱이나 서비스 내부에서 구독하십시오.

someRoutes = [ 
    { path:'awesome', data:{ showFooter: false, title: 'This is page is too awesome for a footer'}, loadChildren: "./awesome.module#awesomeModule" } ]; 

... 

this.router.events 
    .filter(event => event instanceof NavigationEnd) 
    .map(() => this.activatedRoute) 
    .map(route => { 
    while (route.firstChild) route = route.firstChild; 
    return route; 
    }) 
    .filter(route => route.outlet === 'primary') 
    .subscribe((route) => { 
    // do things with route 
    route.data.subscribe((data) => { 
     // do things with route data 
     this.showFooter = data.showFooter; 
    }); 
    });