Question

我有一个简单的Angular 7组件，用于标准化页面标记。

page-title.component.ts

import { Component } from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'my-page-title',
  templateUrl: './page-title.component.html',
  styleUrls: ['./page-title.component.css']
})
export class PageTitleComponent {
      @Input() title?: string;
}

page-title.component.html

<div class="panel panel-default">
  <div class="panel-heading" *ngIf="title">
    <h3 class="panel-title">{{ title }}</h3>
  </div>
  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</div>

我确实使用ngUpgrade库对该组件进行了降级，并且工作正常，但是存在一个问题。在我的AngularJS应用中，我有以下指令

(function () {
  function IsGrantedDirective(AuthManager) {
    return {
      restrict: 'A',
      link(scope, elem, attr) {
        if (AuthManager.isGranted(attr.isGranted)) {
          return;
        }
        console.log("I'm called");
        elem.remove();
      },
    };
  }

  angular
    .module('my.common')
    .directive('isGranted', IsGrantedDirective);
}());

该指令非常简单，但是当我在Angular my-page-title组件内的某个地方使用它时：

<my-page-title>
    <div is-granted="role">Whatever</div>
</my-page-title>

它不起作用：

console.log("I'm called")有效
控制台中没有错误
div仍在显示

看来elem.remove()不会对Angular组件产生任何影响，请问有什么想法吗？

P.S。如果在具有属性的元素上再加上一个裸露的div，似乎是可行的

 <my-page-title>
     <div> // <----
         <div is-granted="role">Whatever</div>
     </div>
 </my-page-title>

AngularJS指令在Angular中不起作用

0 个答案: