在 AngularJS 和 Angular 代码中使用 Angular 组件

Question

我正在尝试使用组件 TableAppInventoryModule 中的组件

// app-inventory.component.html
...
<div class="table-container">
    <mat-table [model]="tableModel"
        (sortChange)="onSortChange($event)"
        [dataSource]="data">
    </mat-table>
</div>
...

Table组件是一个Angular组件：

// src/ts/app/shared/components/table/table.component.ts

...
@Component({
    selector: 'mat-table',
    template: require('./table.component.html')
})

export class TableComponent<T> implements OnInit {
   ...
    ngOnInit() {
        console.log("hello!");
    }
   ...

我在AppModule里注册了

// src/ts/modules/appModule/app.module.ts

@NgModule({
    ...
    declarations: [
        TableComponent,
        ...
    ],
    entryComponents: [
        TableComponent,
        ...
    ],
...
export class AppModule {
...

并将其添加到降级模块中：

// src/ts/modules/appModule/app.module.downgrade.ts

const APP_MODULE_DOWNGRADABLES: Mapper[] = [
    ...
    {
        downgradeAs: 'directive',
        entity: {
            component: TableComponent
        },
        targetName: 'table'
    },
    ...
];

Downgrade.downgradeEntities('AppUI', APP_MODULE_DOWNGRADABLES);

现在我将这个 Table 组件用于 AngularJS 代码：

          // src/template/trails/expanded-table.html

           <div class="table-container">
                <mi-mat-table [model]="tableModel"
                    (sortChange)="onSortChange($event)"
                    [dataSource]="data">
                </mi-mat-table>
            </div>

但是我得到一个错误：

Error: Template parse errors:
Can't bind to 'model' since it isn't a known property of 'mat-table'.
1. If 'mat-table' is an Angular component and it has 'model' input, then verify that it is part of this module.
2. If 'mat-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (">
            <div class="table-container">
                <mat-table [ERROR ->][model]="tableModel"
                    (sortChange)="onSortChange($event)"
                    [data"): 
ng:///AppInventoryModule/AppInventoryComponent.html@170:30 
...

但是我已经把Table组件包含进了AppModule，不知道为什么不可见

Answer 1

我找到了解决方案 - 我需要从 AppModule 的声明中删除 TableComponent 并将其保留在 entryComponents 中：

// src/ts/modules/appModule/app.module.ts

...
    declarations: [
        // TableComponent, 
        ...
    ],
    entryComponents: [
       TableComponent,
       ...
    ],
...

同时更新'targetName: matTable':

// src/ts/modules/appModule/app.module.downgrade.ts

...

    {
        downgradeAs: 'directive',
        entity: {
            component: TableComponent
        },
        targetName: 'matTable'
    },
...

在 AngularJS 和 Angular 代码中使用 Angular 组件

Using Angular component in both AngularJS and Angular code

javascript

downgrade

angularjs

angular