zoukankan      html  css  js  c++  java
  • [Angular] Auxiliary named router outlets

    Define a auxilliary router:

    export const ROUTES: Routes = [
      {
        path: 'folder/:name',
        component: MailFolderComponent,
        resolve: {
          messages: MailFolderResolver
        }
      },
      {
        path: 'message/:id',
        component: MailViewComponent,
        outlet: 'pane',
        resolve: {
          message: MailViewResvoler
        }
      }
    ];

    HTML:

    @Component({
      selector: 'mail-app',
      styleUrls: ['mail-app.component.scss'],
      template: `
        <div class="mail">
          <router-outlet
            (activate)="onActivate($event)"
            (deactivate)="onDeactivate($event)"
          ></router-outlet>
        </div>
        <div class="mail">
          <router-outlet
            name="pane"
          ></router-outlet>
        </div>
      `
    })

    Routing by routerLink:

        <a 
          class="mail-item"
          [routerLink]="['', {outlets: {pane: ['message', message.id]}}]"
          routerLinkActive="active">

    Clean auxiliary router:

              <a
                [routerLink]="[ { outlets: { primary: 'folder/inbox', pane: null } } ]"
                routerLinkActive="active">
                Inbox
              </a>
              <a
                [routerLink]="[ { outlets: { primary: 'folder/trash', pane: null } } ]"
                routerLinkActive="active">
                Trash
              </a>

    Routing by JS:

      openMessage(e) {
        e.preventDefault();
        this.router.navigate(['', {outlets: {pane: ['message', this.message.id]}}])
      }

    RouterLink's advantage: 

    Angular will convert routerLink to an 'a' tag, so all the broswer feature for 'a' tag you can get from RouterLink.

  • 相关阅读:
    docker 安装mysql5.7 加my.cnf
    docker安装redis 配置文件
    私库nexus 配置
    mysql 多个字段建立唯一索引
    scm 一些记录
    tomcat 线程数、NIO配置、内存配置
    为什么简单的一个select查询都要加上事务控制
    powerdeginer report layout
    powerdesigner-连接mysql
    [转载]如何让自己变得有趣
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6772128.html
Copyright © 2011-2022 走看看