ディレクティブのホストで* ngIfを使用するにはどうすればよいですか？

Question

* ngIfのようにDOMを削除/追加するディレクティブを作成したいと思います。私はこれまで持っていることは次のとおりです。

@Directive({ 
    selector: '[myDirective]', 
    host: { 
     '*ngIf': 'hidden', 
    } 
}) 
... 

悲しいことに、私は指令の0​​で'*ngIf': 'hidden'を使用することはできません。

@Directive({ 
    selector: '[myDirective]', 
    host: { 
     '[hidden]': 'hidden', 
    } 
}) 
export class MyDirective { 
    constructor(private myService : MyService) { 
    } 

    hidden() { 
    return !this.myService.valid; 
    } 

しかし、私が必要とするようなものです。私が得るエラーは：

'[ngIf]': 'hidden'は動作しません。

したがって、ディレクティブでngIfを使用するにはどうすればよいですか？

Answer 1

@Injectable() 
export class MyService { 
    valid = true; 
} 

@Directive({ 
    selector: '[myIf]' 
}) 
export class MyIfDirective { 
    constructor(private myService: MyService, 
     private el:ElementRef, 
     private view:ViewContainerRef, 
     private template:TemplateRef<any>) { 
    } 

    ngAfterViewInit(){ 
    if(this.myService.valid) { 
     this.view.createEmbeddedView(this.template); 
    } 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     Peek A Boo: <h2 *myIf>Hello</h2> 
    </div> 
    `, 
}) 
export class App { 
    constructor() { 
    } 
}