Question

让我们说，我有以下组件：

@Component({
    selector: '.abc',
    template: '{{ message }}'
})
export class AbcComponent {
    @Input() message: string;
}

@Component({
    selector: '.efg',
    template: '{{ message }}'
})
export class EfgComponent {
    @Input() message: string;
}

@Component({
    selector: 'my-wrapper',
    templateUrl: './my-wrapper.component.html'
})
export class MyWrapperComponent implements OnInit {
    data: { selector: string, message: string }[];

    ngOnInit() {
        data = [
            {selector: 'abc', message: 'Hello '},
            {selector: 'efg', message: 'world'}
        ];
    }
}

和 my-wrapper.component.html

<div class="abc" [message]="Hello "></div>
<div class="efg" [message]="World"></div>

因为AbcComponent和DefComponent选择器以 dot 为前缀，所以我可以使用class参数选择组件。

这就是问题所在。 我可以动态设置该类吗？我现在将使用MyWrapperComponent的 data 字段并将 my-wrapper.component.html 更改为：

<div *ngFor="let element of data">
    <div [class]="element.selector" [message]="element.message"></div>
</div>

不幸的是，这将无法正常工作，错误消息消息不是div 的已知属性。但即使我删除了该属性绑定，它也会使用附加的类而不是组件呈现div。

我还尝试使用 class =“{{element.selector}}”和 [ngClass] =“element.selector”，但在这两种情况下，它都无法正常工作

解决方法可能是ngSwitch。

<div *ngFor="let element of data" [ngSwitch]="element.selector">
    <div class="abc" *ngSwitchCase="'abc'" [message]="element.message"></div>
    <div class="def" *ngSwitchCase="'def'" [message]="element.message"></div>
</div>

但是我不喜欢这个解决方案，因为有一个代码重复，我想要它更动态。

描述的组件是虚拟的，我的用例是创建一个通用的导航组件，它重现了表示类型的现有组件的元素列表

{selector: string, data: any}

并基于此，它动态显示组件，例如：ExternalLinkNavigationItemComponent，ExternalLinkNavigationItemComponent，AnchorNavigationElement等。

按动态类参数

0 个答案: