각도 4 라우터 콘센트 내용

Question

모든 라우터 출력 링크에 동일한 블록을 표시해야합니다. 헤더 만 있지만 제목과 일부 버튼은 앱 구성 요소에서 관리됩니다.

<router-outlet> 
    <md-toolbar (click)="someAction()"> {{ title }} </md-toolbar> 
</router-outlet> 

그리고 이런 모든 라우터 링크 뭔가 내부

:

<ng-content></ng-content> 
<h1>This is my page</h1> 
<p>blablabla</p> 

는 그래서 MD-도구 모음 태그는 페이지의 내부 될 것

나는 기본적으로 같은 것을 할 필요가

Answer 1

<router-outlet>에는 콘텐츠가 포함되어 있지 않습니다. 라우터가 구성 요소를 추가하는 앵커 일뿐입니다.

빈 경로 경로를 더미 구성 요소 (show-nothing-component)와 함께 사용하면 사용자가 상세보기로 이동하기 전에 기본 내용을 표시 할 수 있습니다. 이런 식으로 변경

Answer 2

시도 :

<md-toolbar (click)="someAction()"> {{ title }} </md-toolbar> 
<router-outlet></router-outlet> 

이 그 다음은 라우팅 내용 위의 상단에 나타납니다.

도구 모음이없는 일부 구성 요소와 일부 구성 요소가 필요한 경우에는 다른 중간 구성 요소가 필요합니다.

app.component.html 위의 라우터 콘센트에

<router-outlet></router-outlet> 

경로는 없는 메뉴 또는 도구 모음을 필요로하는 경우.

shell.component.html 도구 모음을 필요로하지 않습니다 모든 콘텐츠에 대해 위의 라우터 콘센트에

<md-toolbar (click)="someAction()"> {{ title }} </md-toolbar> 
<router-outlet></router-outlet> 

경로.

RouterModule.forRoot([ 
     { 
      path: '', 
      component: ShellComponent, 
      children: [ 
       { path: 'welcome', component: WelcomeComponent }, 
       { path: 'x', component: XComponent}, 
       { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 
      ] 
     }, 
     { path: 'login', component: LoginComponent }, // <-- no toolbar 
     { path: '**', component: PageNotFoundComponent } // <-- no toolbar 
    ]) 

Answer 3

왜이 방법으로 그것을 어떻게해야합니까 경로 구성? 그냥 다음과 같이 입력 할 수는 없습니까?

<md-toolbar (click)="someAction()"> {{ title }} </md-toolbar>  
<router-outlet></router-outlet> 

이 툴바는 라우터 출력 위에 매번 생성됩니다. <ng-content>