Невозможно использовать mat-tab в селекторе атрибутов. - PullRequest
Новая
       17

Невозможно использовать mat-tab в селекторе атрибутов.

1 голос
/ 07 апреля 2020

Я пытаюсь поместить две вкладки в два отдельных компонента, например: 

<mat-tab-group animationDuration="0ms">
    <mat-tab app-tab [label]="'blabla1'" [data]="aaaData"></mat-tab>
    <mat-tab app-tab [label]="'blabla2'" [data]="bbbData"></mat-tab>
</mat-tab-group>

... 

@Component({
    selector: 'mat-tab[app-tab]',
    templateUrl: './tab.component.html',
    styleUrls: ['./tab.component.scss']
})
export class TabComponent {
    @Input() label: string;
    @Input() data: any;

и в module.ts: 

import {MatTabsModule} from '@angular/material';
@NgModule({
    imports: [
        MatTabsModule,

И я получаю ошибку:

Uncaught Error: Ошибки синтаксического анализа шаблона: этому элементу соответствует более одного компонента. Убедитесь, что селектор только одного компонента может соответствовать данному элементу. Конфликтующие компоненты: MatTab, TabComponent ("

Или, если я использую a mat-tab-link вместо mat-tab и a[mat-tab-link][app-tab] вместо mat-tab[app-tab], я получу

Uncaught Error: Ошибки синтаксического анализа шаблона: невозможно связать с «данными», так как это не известное свойство «a». ("Mat-tab-group animationDuration =" 0ms ">

и он не поддерживает свойство label:

Uncaught Error: Ошибки синтаксического анализа шаблона: Невозможно привязать к 'label', так как это не известное свойство 'a'. ("s =" tabs-wrap ">] [label] =" 'blabla1' "[data] =" aaaData ">

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Я бы поместил другой элемент в mat-tab, чтобы избежать путаницы с селекторами компонентов материала.

Так что больше похоже на: 

<mat-tab-group animationDuration="0ms">
    <mat-tab label="blabla1">
        <tab-component [data]="aaaData"></tab-component>
    </mat-tab>
    <mat-tab label="blabla2">
        <tab-component [data]="bbbData"></tab-component>
    </mat-tab>
</mat-tab-group>

@Component({
    selector: 'tab-component',
    templateUrl: './tab.component.html',
    styleUrls: ['./tab.component.scss']
})
export class TabComponent {
    @Input() data: any;
0 голосов
/ 07 апреля 2020

Вы получаете 

Uncaught Error: Template parse errors: More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: MatTab,TabComponent ("

, потому что вы объявляете в своем проекте компоновщик селектора мат-вкладок, который не может быть выполнен, поскольку уже присутствует тот же компонент имени.

Вы можете переименуйте селектор компонента в компоненте вкладки с

mat-tab[app-tab] на app-tab

, затем вы можете использовать его на вкладке с матом, как это 

<mat-tab>
   <app-tab [label]="'blabla2'" [data]="bbbData"></app-tab>
</mat-tab>

Ошибка заключается в том, что метка и данные не являются атрибутами вкладки мат.

Используйте компонент отдельно в компоненте вкладки мат

...