Question

我想在路由器插座中设置一些默认文本，直到它被填充。

我有一个父组件，它将在该页面的路由器插座中显示子路由组件。

单击时，有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>

EDIT 这是我的路线

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

Answer 1

路由器插座内的默认文本，直到填充

首先，您的假设是错误的，内容未插入插入插座，但位于下面。

您无法在模板中设置默认内容，但可以设置包含默认内容的默认路由。只需使用path: ''并使用component和“默认”模板。

使用您需要的“默认”模板创建一个组件：

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

并将其添加到您的路线中。

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

Answer 2

在模板中：

pip install opencv-python==(Version you wanna install, i installed 3.1.0.5)

然后在Component中只需切换“ showDefaultMessage”属性：

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

Answer 3

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

Answer 4

<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

Angular 2在路由器插座中设置默认内容

4 个答案: