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

发布时间：2020-12-17 17:03:38 所属栏目：安全来源：网络整理

导读：我想在路由器插座内设置一些默认文本,直到它被填充. 我有一个父组件,将在该页面上的路由器插座中显示子路由组件. 单击时,有2个按钮将使用子组件填充路由器插座.如何将内容放置在路由器插座内部,例如. “单击选项以显示数据”,然后单击该按钮后此消息将清除,

我想在路由器插座内设置一些默认文本,直到它被填充.

我有一个父组件,将在该页面上的路由器插座中显示子路由组件.

单击时,有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}
    ]

解决方法

default text inside the router-outlet until it is populated

首先,你的假设是错误的,内容不是插在插座内,而是插在插座下面.

您无法在模板中设置默认内容,但可以设置包含默认内容的默认路由.只需使用路径：”并使用带有“默认”模板的组件.

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

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

并将其添加到您的路线.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!