AngularJS指令在Angular中不起作用

我有一个简单的angular7组件,用于规范化页面标记。

页码-标题.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;
}

页码-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);
}());

my-page-title 组成部分:

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

它不起作用:

1. console.log("I'm called")
2. 控制台中没有错误
3. 这个 div 仍在显示

elem.remove()

部门

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