在路由器出口角2组默认内容

问题描述 投票:3回答:4

我想设置路由器的出口里面的一些默认的文本被填充到。

我有一个将页面上的路由器出口中显示的子路径组件父组件。

有2个按钮,点击后,将填充路由器出口与孩子组成部分。我怎样才能把路由器出口如里面的内容。 “按一个选项来显示数据”,那么,一旦按钮被点击这个消息被清除,并在路由器出口子组件显示?

<div class="container pt-3">
    <div class="clearfix">
        <div class="btn btn-outline-success float-left"
            routerLink="/unpaid/people">
            View People
        </div>
        <div class="btn btn-outline-success float-right"
            routerLink="/unpaid/bills">
            View Bills
        </div>
    </div>
</div>
<router-outlet>Click an options to display the data</router-outlet>

编辑这里是我的路线

path: 'unpaid', component: UnpaidBillsComponent,
    children: [
      {path: 'people', component: UnpaidPeopleComponent},
      {path: 'bills', component: UnpaidBillListComponent}
    ]
angular
4个回答
10
投票

路由器的出口里面默认的文字,直到它填充

首先,你在这里的假设是错误的,内容没有插入插座内,但低于它。


你可以不设置模板默认的内容,但您可以设置其中包含默认内容的默认路由。只需使用path: ''和使用component你的“默认”模板。


创建你所需要的“默认”模板组件:

@Component({template: `Default template here`})
export class DefaultTemplateComponent {}

并把它添加到您的路线。

children: [
  {path: '', component: DefaultTemplateComponent},
  {path: 'people', component: UnpaidPeopleComponent},
  {path: 'bills', component: UnpaidBillListComponent},
]

2
投票

模板:

<p *ngIf="showDefaultMessage">Click an options to display the data</p>
<router-outlet (activate)="toggleDefaultMessage(false)" (deactivate)="toggleDefaultMessage(true)"></router-outlet>

然后在组件只需拨动“showDefaultMessage”属性:

private showDefaultMessage = true; // default state

toggleDefaultMessage(state: boolean) {
    this.showDefaultMessage = state;
}

0
投票
children: [
  {path: '', redirectTo: '/people', pathMatch: 'full'},
  {path: 'people', component: UnpaidPeopleComponent},
  {path: 'bills', component: UnpaidBillListComponent}
]

0
投票
<div class="col-sm-10">
<router-outlet></router-outlet>
<a routerLink="/" routerLinkActive #rla="routerLinkActive" 
   [routerLinkActiveOptions]="{exact:true}">
  <h5 *ngIf="rla.isActive" class="beauty">Click on any button to start!</h5>
</a>
</div>

https://angular.io/api/router/RouterLinkActive

© www.soinside.com 2019 - 2024. All rights reserved.