Question

我正在导航（./header.component.html），就像......

      <div class="collapse navbar-collapse" id="navbarSupportedContent" [innerHTML]="navInnerHTML">
      </div>

使用组件（./header.component.ts）

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.css']
    })
    export class HeaderComponent implements OnInit {
      navInnerHTML = '';
      mainNav = [];
      sideUserNav = [];
      constructor() { }

      ngOnInit() {
        this.configureNavigation();
      }
      configureNavigation() {
        console.log('Loading navigation...');
        this.clearNavigation();
        this.loadUserNavigation();
      }
      clearNavigation() {
        this.navInnerHTML = ``;
        this.mainNav = [];
        this.sideUserNav = [];
      }
      loadUserNavigation() {
        this.mainNav.push(
            {type: 'link', path: 'home', title: 'Home'},
            {type: 'dropdown', path: '', title: 'Sample', subNavID: 'Sample_DML', subNav: [
                    {type: 'link', path: 'sd-Sample', title: 'Sample'},
                    {type: 'link', path: 'sd-Sample/ef', title: 'SampleEF'},
                    {type: 'link', path: 'sd-Sample/pf', title: 'SamplePF'}
                ]}
        );
        let navInnerHTMLString = ``;
        if (this.mainNav.length > 0) {
          navInnerHTMLString += `<ul class="navbar-nav mr-auto">`;
          for (const menu of this.mainNav) {
            navInnerHTMLString += `<li`;
            navInnerHTMLString += ` class = "nav-item` + ((menu.type === 'dropdown') ? ` dropdown" ` +
              `ngbDropdown` : `"`);
            navInnerHTMLString += ` [routerLinkActive]="['active']"`;
            navInnerHTMLString += `>`;
            navInnerHTMLString += `<a`;
            navInnerHTMLString += ` class = "nav-link` + ((menu.type === 'dropdown') ? ` dropdown-toggle" ` +
              `ngbDropdownToggle` : `"`);
            navInnerHTMLString += ((menu.type === 'link') ? ` [routerLink]="['` + menu.path + `']"` : ``);
            navInnerHTMLString += ` `;
            navInnerHTMLString += ((menu.type === 'dropdown') ? `id="` + menu.subNavID + `"` +
              ` aria-haspopup="false" aria-expanded="false"` : ``);
            navInnerHTMLString += ` style="cursor:pointer;"`;
            navInnerHTMLString += `>`;
            navInnerHTMLString += menu.title;
            navInnerHTMLString += ((menu.title === 'Home') ? `<span class="sr-only">(current)</span>` : ``);
            navInnerHTMLString += `</a>`;
            /*div for subNav goes here.*/
            navInnerHTMLString += `</li>`;
          }
          navInnerHTMLString += `</ul>`;
        }
        this.navInnerHTML = navInnerHTMLString;
      }
    }

我试图让它看起来像

    <div class="collapse navbar-collapse" id="navbarSupportedContent" [innerHTML]="navInnerHTML">
        <li class="nav-item" [routerLinkActive]="['active']">
          <a class="nav-link" [routerLink]="['home']" style="cursor:pointer;">Home <span class="sr-only">(current)</span></a>
        </li>

        <li class="nav-item dropdown" ngbDropdown [routerLinkActive]="['active']">
          <a class="nav-link dropdown-toggle" ngbDropdownToggle style="cursor:pointer;" id="sampleDML" aria-haspopup="false" aria-expanded="false">
            Sample
          </a>
          <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="sampleDML">
            <a class="dropdown-item" [routerLink]="['sd-Sample']">Sample</a>
            <a class="dropdown-item" [routerLink]="['sd-Sample/ef']">SampleEF</a>
            <a class="dropdown-item" [routerLink]="['sd-Sample/pf']">SamplePF</a>
          </div>
        </li>
    </div>

但是ff。不会出现在Elements（Chrome的Inspect Element）上：

1。）[routerLinkActive] =“['active']”表示激活或[routerLink] =“['sd-Sample']”表示href

2。）ngbDropdown和ngbDropdownToggle属性。

可以在Angular 5 Typescript中为[innerhtml]读取带有属性绑定的模板吗？或者如何？

Answer 1

我有点滥用ng-container而不需要内部HTML ...

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto" *ngIf="mainNav">
        <ng-container *ngFor="let menu of mainNav">
          <li *ngIf="menu.type=='link'" class="nav-item" [routerLinkActive]="['active']">
            <a class="nav-link" [routerLink]="menu.path" style="cursor:pointer;">{{menu.title}}
              <span *ngIf="menu.path=='home'" class="sr-only">(current)</span>
            </a>
          </li>
          <li *ngIf="menu.type=='dropdown'" class="nav-item dropdown" ngbDropdown [routerLinkActive]="['active']">
            <a class="nav-link dropdown-toggle" ngbDropdownToggle style="cursor:pointer;" id="menu.subNavID" aria-haspopup="false" aria-expanded="false">
              {{menu.title}}
            </a>
            <div class="dropdown-menu" ngbDropdownMenu aria-labelledby="menu.subNavID">
              <ng-container *ngFor="let subMenu of menu.subNav">
                <a *ngIf="subMenu.type=='link'" class="dropdown-item" [routerLink]="subMenu.path">{{subMenu.title}}</a>
              </ng-container>
            </div>
          </li>
        </ng-container>
      </ul>
    </div>

可以在Angular 5 Typescript中为[innerhtml]读取带有属性绑定的模板吗？

1 个答案: