В ng6 моя директива не обновляет мой компонент - PullRequest
Новая
       34

В ng6 моя директива не обновляет мой компонент

0 голосов
/ 16 октября 2018

У меня есть меню, которое зависит от того, кто вошел в систему: 

<mat-nav-list>
  <a mat-list-item routerLink="/login">Log-in</a>
  <a mat-list-item routerLink="/register" *hasClaim="'IsAdmin'">Register</a>
  <a mat-list-item routerLink="/about">About</a>
</mat-nav-list>

Я использую директиву, чтобы показать или скрыть пункт меню.Когда я не вошел в систему, пункт меню удаляется.Это правильно.Когда я вошел в систему с надлежащим утверждением, директива сообщает, что добавляет пункт меню, но я его не вижу.

Кажется, мое меню не обновлено.

Моя директива: 

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
import {AuthenticationService} from '@services/authentication.service';

@Directive({selector: '[hasClaim]'})
export class HasClaimDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private authenticationService: AuthenticationService) {
  }


  @Input() set hasClaim(claimType: any) {
    console.log('In hasClaim input. claimType:', claimType);
    if (this.authenticationService.hasClaim(claimType)) {
      console.log('Add template to DOM', this.templateRef);
      // Add template to DOM
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      console.log('Remove template from DOM');
      // Remove template from DOM
      this.viewContainer.clear();
    }
  }
}

Мой журнал консоли перед входом в систему: 

In hasClaim input. claimType: IsAdmin
has-claim.directive.ts:21 Remove template from DOM

Мой журнал консоли после входа в систему: 

login successful 
Valid token, current user is set.
Logged in.
Finished login
In canActivate. claimName: undefined
In hasClaim input. claimType: IsAdmin
Add template to DOM

Последние две строки взяты из директивы,Там написано Add template to DOM, но мое меню не изменилось.

Кажется, я что-то упустил.

Редактировать : Проверить результат элемента: 

<mat-nav-list _ngcontent-c1="" class="mat-nav-list" role="navigation">
   <a _ngcontent-c1="" class="mat-list-item" mat-list-item="" routerlink="/login" ng-reflect-router-link="/login" href="/login">
      <div class="mat-list-item-content">
         <div class="mat-list-item-ripple mat-ripple" mat-ripple="" ng-reflect-disabled="false" ng-reflect-trigger="http://localhost:4250/login"></div>
         <div class="mat-list-text"></div>
         Log-in
      </div>
   </a>
   <!--bindings={
      "ng-reflect-has-claim": "IsAdmin"
      }-->
   <a _ngcontent-c1="" class="mat-list-item" mat-list-item="" routerlink="/about" ng-reflect-router-link="/about" href="/about">
      <div class="mat-list-item-content">
         <div class="mat-list-item-ripple mat-ripple" mat-ripple="" ng-reflect-disabled="false" ng-reflect-trigger="http://localhost:4250/about"></div>
         <div class="mat-list-text"></div>
         About
      </div>
   </a>
</mat-nav-list>

<mat-nav-list> не изменяется после входа в систему.

...