0

假设我们有几个组件，每个组件都应具有不同的布局/ui（模板），并以显示尺寸为条件。

我的解决方案是创建这样一个组件：

import {Component} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({
    selector: 'ui-switcher',
    template: `
        <ng-content *ngIf="isSmall" select="mobile"></ng-content>
        <ng-content *ngIf="!isSmall" select="web"></ng-content>
`
})
export class UiSwitcherComponent {
    public isSmall: boolean;

    constructor(breakpointObserver: BreakpointObserver) {
        breakpointObserver.observe([Breakpoints.Small, Breakpoints.XSmall]).subscribe(result => {
            this.isSmall = result.matches;
        });
    }

}

并以这种方式使用它：

<ui-switcher>
    <web>
        <!-- a ui suited for large screens -->
    </web>

    <mobile>
        <!-- a very different ui suited for small mobile screen displays-->

    </mobile>
</ui-switcher>

此解决方案可能存在一些缺陷。例如，我们不能在<mobile>和<web>部分中使用相同的模板引用。（上面我们使用#searchInputand #searchInput2）。


这种情况的最佳做法是什么？

4

1 回答 1

1

在您的示例中，您只是添加了一个 CSS 类 if isSmallis false。您可以通过简单地输入 1 个（不是 2 个）来解决这个问题，并有条件地添加类。

因此，不是有条件地渲染 2 个相同的 HTML 块……而是使用条件 CSS 类渲染 1 个块。

下面的例子：

@Component({
    selector: 'ui-switcher',
    template: `
        <input class="form-control" [ngClass]="{'mr-2': !isSmall}"> 
        type="text" (keyup)="this.search(searchInput.value)">
`
})

现在，如果您的内容真的会改变并且您需要的不仅仅是简单*ngIf的...那么，一个好的解决方案是使用 in tamplateif...else甚至if...elseif...else.

此处参考：如何在 Angular 中使用 *ngIf else？

有关更多条件类的用法，请查看这篇文章：Angular: conditional class with *ngClass

希望它有所帮助！;)

更新：

OP 指的是仅影响 CSS 类的更改，但是如果您想将组件动态加载到代码块中……我会说您使用ngComponentOutlet。

例子：

        <fieldset *ngFor="let component of components">
            <ng-container *ngComponentOutlet="component.name;
                                ngModuleFactory: dynamicComponentsModule;"></ng-container>
        </fieldset>

这种方法的好处是您可以创建一个地图，并且每个选项都Component与它相关联。例子：

map = [
   'option1': ComponentForOption1,
   'option2': ComponentForOption2
];

我建议这篇文章提供更完整的示例：

使用 ngTemplateOutlet 基于值而不是变量的动态模板

有了这个，在这个答案中，我提供了有关如何拥有的信息：

  1. 动态 CSS 类
  2. 带有模板内的条件 HTMLif...elseif...else
  3. 动态组件加载
于 2018-04-29T23:15:28.213 回答