无法绑定到“ngIf”，因为它不是“ng-container”的已知属性

Question

同样的事情被问了大约1000次，但我注入了CommonModule。

我有一个延迟加载的模块，并在多个路径上使用，比如在主布局内部和外部

它工作得很好，但当我在其中运行测试用例时，它们仍然抛出Can't bind to 'ngIf' since it isn't a known property of 'ng-container'，即使我已经注入了公共模块，并且ViewChild也返回未定义的，如果它在ngIf中，或者即使它不是，ViewChild只返回组件的开始和结束标记。

有问题的模块(测试模块)的HTML

<ng-container *ngIf="step === 'search'">
  <app-search #search></app-search>
<ng-container>
<app-unsaved #unsaved></app-unsaved>

组件

@ViewChild('unsaved') unsaved: UnsavedComponent;
@ViewChild('search') search: SearchComponent;

路由

在主布局中

{
    path: 'test',
    canActivate: [ValidatedGuard],
    loadChildren: () => import('@app/test.module').then(mod => mod.TestModule)
},

在延迟加载的路由中

{ path: '', component: TestComponent, canDeactivate: [CanDeactivateGuard] }

一切看起来都很好，但当我运行测试用例时，

WARN LOG: 'Can't bind to 'ngIf' since it isn't a known property of 'ng-container'.'

和

ElementRef{nativeElement: <app-unsaved></app-unsaved>}



@NgModule({
    declarations: [
        TestComponent
    ],
    imports: [
        TestRouting,
        CommonModule,
        SearchModule,
        QuotesModule,
        ConfirmModule,
        UnsavedModule
    ]
})

export class TestModule { }


const routes: Routes = [
    { path: '', component: TestComponent, canDeactivate: [CanDeactivateGuard] }
];

export const TestRouting = RouterModule.forChild(routes);

Answer 1

使用*ngTemplateOutlet属性有条件地显示带有ng-container的内容。

你给它的值应该是一个元素的模板引用，并做一个三元运算符，如果你想要显示它或不显示它。

<ng-container *ngTemplateOutlet="step === 'search' ? appSearch : null">
<ng-container>

<ng-template #appSearch><app-search #search></app-search></ng-template>