我想设置路由器的出口里面的一些默认的文本被填充到。
我有一个将页面上的路由器出口中显示的子路径组件父组件。
有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}
]
路由器的出口里面默认的文字,直到它填充
首先,你在这里的假设是错误的,内容没有插入插座内,但低于它。
你可以不设置模板默认的内容,但您可以设置其中包含默认内容的默认路由。只需使用path: ''
和使用component
你的“默认”模板。
创建你所需要的“默认”模板组件:
@Component({template: `Default template here`})
export class DefaultTemplateComponent {}
并把它添加到您的路线。
children: [
{path: '', component: DefaultTemplateComponent},
{path: 'people', component: UnpaidPeopleComponent},
{path: 'bills', component: UnpaidBillListComponent},
]
模板:
<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;
}
children: [
{path: '', redirectTo: '/people', pathMatch: 'full'},
{path: 'people', component: UnpaidPeopleComponent},
{path: 'bills', component: UnpaidBillListComponent}
]
<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>