angular – 选择应该用于呈现路径内容的路由器插座

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

导读：我有一个导航组件,这是一个处理一些路由切换的菜单,我遇到的问题是我似乎无法呈现路由的内容,因为我在导航中没有路由器插座组件模板. 相反,我想在我的主应用程序组件核心中呈现路由的内容,但是如何告诉angular使用我的核心组件中的路由器插座而不是我的导航

我有一个导航组件,这是一个处理一些路由切换的菜单,我遇到的问题是我似乎无法呈现路由的内容,因为我在导航中没有路由器插座组件模板.

相反,我想在我的主应用程序组件核心中呈现路由的内容,但是如何告诉angular使用我的核心组件中的路由器插座而不是我的导航组件？

由于我的[routerLink]在此模板中：

nav.component.html：

<nav class="nav-wrapper" [class.is-toggled]="isToggled" [class.is-hidden]="!isToggled">
  <ul class="nav-links">
    <li class="nav-link" *ngFor="#link of links">
      <a [routerLink]="link.href">
        <div class="label-wrapper">{{link.label}}</div>
        <div class="icon-wrapper"><i class="{{link.icon}}"></i></div>
      </a>
    </li>
  </ul>
</nav>

它不希望将路由呈现到核心组件中：

core.component.html：

<!-- The menu -->
<nav-list></nav-list> 

<!-- The router-outlet which should render the videos component -->
<router-outlet></router-outlet>

videos.component.html：

<h1>My videos</h1>

<!-- This should render the child views of the videos component -->
<router-outlet></router-outlet>

list.videos.component.html：

<h1>Videos list</h1>

因此,您可以看到我希望将底部片段渲染到中间片段,然后在核心组件内部的顶部进行渲染.

我怎样才能做到这一点？

最重要的是,我不希望在nav组件中有路由器插座.

解决方法

所以我有一个类似的设置,我有一个主要的布局组件：

<shellheader (menuToggle)="onMenuToggle($event)"></shellheader>

<section id="main">
    <navigation [menuToggled]="menuToggled"></navigation>

    <section id="content">
        <div class="container">
            <div class="block-header">
                <h2>Header</h2>                    

                <router-outlet></router-outlet>

            </div>
        </div>
    </section>
</section>

<shellfooter></shellfooter>

主要布局组件代码：

@Component({
    templateUrl: "app/shell/main-layout.component.html",directives: [ROUTER_DIRECTIVES,NavigationComponent,HeaderComponent,FooterComponent]
})
@RouteConfig([
        { path: "/dashboard/...",name: "Dashboard",component: DashboardComponent,useAsDefault: true }
])
export class MainLayoutComponent {

    public menuToggled: boolean;

    public onMenuToggle(event:boolean) {
        this.menuToggled = event;
    }
}

在我的导航组件中,我有一些路由器链接(没有路由器插座,只使用routerlink指令,没有定义子路由)：

<ul class="main-menu">
        <li *ngFor="#navItem of navItems">
            <a [routerLink]="navItem.route">
                <i *ngIf="navItem.icon" class="{{navItem.icon}}"></i>
                {{ navItem.text }}
            </a>
        </li>
    </ul>

单击这些路由器链接会更改浏览器中的路由,主组件中的插座会响应这些路由更改.

您不需要在导航组件中安装路由器插座.如果路径没有呈现给您的主要组件,则您可能没有在主要组件中包含所需的指令,例如：

import {RouteConfig,ROUTER_DIRECTIVES} from "angular2/router";

...

@Component({
    directives: [ROUTER_DIRECTIVES,...]
})

Plunker：https://plnkr.co/edit/P6Bkwy?p=info

进一步信息：https://angular.io/docs/ts/latest/guide/router.html

（编辑：李大同）

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