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.

  • 相关阅读:
    上架的问题
    moya rxswift的简单实用
    MySql的简单使用,所有的代码基于MAC
    H5测试区别与PC端测试关注点
    测试小结
    测试之找回密码
    转Web安全测试之XSS
    一个最简单的登录页面测试case
    web测试特别点
    关于web测试
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6772128.html
Copyright © 2011-2022 走看看