Angular 2在路由器插座中设置默认内容 [英] Angular 2 set default content in the router-outlet

问题描述

我想在路由器插座内设置一些默认文本，直到填充为止.

I want to set some default text inside the router-outlet until it is populated.

我有一个父组件，它将在该页面上的路由器出口内显示子路由组件.

I have a parent component that will display the child route component within the router-outlet on that page.

单击时，有2个按钮将使用子组件填充路由器出口.我如何将内容放入路由器插座中? 单击选项以显示数据"，然后单击该按钮后，该消息将清除，并且子组件将显示在路由器插座中吗?

There are 2 buttons that will populate the router-outlet with the child component when clicked. How can i place content inside the router outlet eg. 'Click an options to display the data' then once the button is clicked this message clears and the child component displays in the router outlet?

<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

首先，您的假设在这里是错误的，内容不是在内部插入插座，而是在下方插入.

Firstly, your assumption here is wrong, content is not inserted inside the outlet, but below it.

您不能在模板中设置默认内容，但是可以设置包含默认内容的默认路由.只需使用path: ''并在您的默认"模板中使用component.

You cannot set a default content in the template, but you can set the default route which contains your default content. Simply use path: '' and use a component with your "default" template.

使用所需的默认"模板创建组件:

Create a component with the "default" template you need:

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

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

And add it to your routes.

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

这篇关于Angular 2在路由器插座中设置默认内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！