Использование компонента Angular как в коде AngularJS, так и в коде Angular

Я пытаюсь использовать компонент TableComponent в AppInventoryModule.

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

TableComponent — это компонент 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.info("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);

Теперь я использую этот компонент таблицы в коде 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, не знаю, почему он не виден.

Я вижу, вы targetName: «таблица», к чему относится «таблица»?

Kevin Zhang 24.12.2020 10:17

@KevinZhang спасибо, мне нужно было добавить «targetName: matTable»

Milena 24.12.2020 10:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
78
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел решение - мне нужно было удалить TableComponent из объявлений в AppModule и оставить его в 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'
    },
...

Другие вопросы по теме