为什么ContentChild不阅读传递的元素？

Question

我有一个AuthComponent和一个LoginSignupComponent。我想将表单传递给LoginSignupComponent并显示特定于登录或注册的字段。

这是我的LoginSignUp组件：

`export class LoginSignupView implements OnInit {
  @Input() public authForm: FormGroup;

  @Input() public mode: 'login' | 'signup' = 'login';

  @ContentChild(LoginDirective, { read: TemplateRef }) loginTemplate;
  @ContentChild(SignupDirective, { read: TemplateRef }) signupTemplate;

  constructor() { }

  ngOnInit() {
    console.log("Inside of login, authForm: ",this.authForm)
    console.log("Inside of login, loginTemplate: ",this.loginTemplate)
  }

}`

以及该组件的模板：

`<ng-container [ngSwitch]="mode">
<ng-container *ngSwitchCase="'login'">
    <ng-container *ngTemplateOutlet="loginTemplate">Test</ng-container>
</ng-container>
<ng-container *ngSwitchCase="'signup'">
    <ng-container *ngTemplateOutlet="signupTemplate"></ng-container>
</ng-container>
</ng-container>`

然后在我的AuthComponent中，我要维护表单并将其传递。它将默认登录。目前，我正在使用p标签而不是表格进行测试。这是我的Auth模板：

`<app-login [mode]="login" [authForm]="authForm">
    <p *login>
      Static Card Template
    </p>
</app-login>`

login指令没有什么特别的。它只是一个指令，没有逻辑。

`@Directive({
  selector: '[login]'
})
export class LoginDirective {

  constructor() { }

}`

这应该正常吗？还是我错过了一些东西，却不了解ngTemplateOutlet的工作原理。我一直在尝试遵循本指南

https://alligator.io/angular/reusable-components-ngtemplateoutlet/