如何在 AngularJS 代码中隐藏 Angular 组件

Question

我有 MyTableComponent Angular 组件从 AngularJS 代码渲染：

// AngularJS code
// src/template/expanded-table.html
   ...
   <div class="table-view-port">
      <my-table ng-show="false" [model]="tableModel"
                                [dataSource]="data">
      </my-table>
   </div>
   ...

在 Angular MyTableComponent 我有：

// Angular code
// shared/components/table/table.component.ts

...
export class MyTableComponent<T> implements OnInit {
    ...
    ngOnInit() {
        console.log('Table component');
    }
    ...

我需要做的只是不渲染my-table。我尝试使用 ng-show="false" 来做到这一点，但它不起作用。我也试过 *ngIf="false"，但结果相同。

我的降级模块是否会产生某种影响：

// appModule/app.module.downgrade.ts 

const APP_MODULE_DOWNGRADABLES: Mapper[] = [
    ...
    {
        downgradeAs: 'directive',
        entity: {
            component: MyTableComponent
        },
        targetName: 'myTable'
    },
    ...

Answer 1

ng-show 是一个 angularJs 指令，它呈现一个 html 元素，然后隐藏如果条件不是这个意思， *ngIf 是Angular 指令，如果您不希望元素呈现，您应该使用 ng-if="false"，这是正确的 angularJs 语法。

见documentation

如何在 AngularJS 代码中隐藏 Angular 组件

How to hide Angular component inside AngularJS code

javascript

angularjs

angular