Question

我有一个要求，我需要在单个角度2/4应用程序中基于URL加载不同的布局和外观。我怎样才能做到这一点？

例如：

localhost：8080 / context / view1和localhost：8080 / context / view2应该显示不同的皮肤和布局。

任何指针都会有所帮助。

Answer 1

这是Angular 2 / Angular 4路由器事件，每当它是父路由或子路由时，您将在页面路由中获得一个对象。它将包含一个键＆＃39; urlAfterRedirects＆＃39; ，您可以使用* ngIf来处理视图。

router.events.subscribe(data => {
        console.log(data);
});

Answer 2

我要处理的方法是创建一个布局服务，负责处理当前的皮肤名称，页眉和页脚URL以及所有其他皮肤相关信息。

<强> layout.ts

export class Layout {
    skin: string;
    headerUrl: string;
    footerUrl: string;
    //Add all properties you might need
}

以下是管理布局的服务框架：

<强> layoutservice.ts

import { BehaviorSubject, Observable } from 'rxjs/Rx';
import { Router, NavigationStart } from '@angular/router';
import { Layout } from './layout';

@Injectable()
export class LayoutService {
    private _currentSubject = new BehaviorSubject<Layout>(this.getDefault());
    public current = this._currentSubject.asObservable();

    constructor(private router: Router) {
        this.init();
    }

    private init() {
        this.router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                //Navigation occured, check if we should switch layout. 
            }
        });
    }

    private getDefault(): Layout {
        return { skin: 'skin_a', headerUrl: 'http://somewhere.com/header', footerUrl: 'http://somewhere.com/footer' };
    }

    private setLayout(layout: Layout): void {
        this._currentSubject.next(layout);
    }
}

因此，此服务将订阅任何导航更改，您可以应用一些逻辑来查看是否应更新当前布局。要更新布局，只需调用setLayout（），布局服务的所有订阅者都将收到有关布局更改的通知。现在，您可以将此服务注入任何需要了解布局的组件，他们可以做出相应的反应。

例如，我会通过将css类应用于其中一个顶部元素来控制皮肤。因此，我将使用默认外观创建一个css，然后覆盖单独文件中的蒙皮项：

<强> default.css

.my-skinned-class {
    color: #000;
    background: #FFF;
}

.my-not-skinned-class {
    border-radius: 50%;
}

<强> skin_a.css

.skin_a .my-skinned-class {
    //Override style
}

<强> skin_b.css

.skin_b .my-skinned-class {
    //Override style
}

在AppComponent中，注入layoutservice，然后订阅当前布局：

<强> app.component.ts

this.layoutservice.current.subscribe(layout => this.layout = layout);

现在可以根据需要使用页眉，页脚路径和皮肤名称。此处的外观是通过将外观名称绑定到内容占位符的类属性来控制的。通过这样做，您只需更改布局服务中的外观名称，即可更新内容占位符中的所有项目。

<强> app.html

<div class="header"><img [src]="layout.headerUrl" />
</div>
<div class="content" [attr.class]="layout.skin">
    <div class="my-skinned-class">This item change skin depending on layout!</div>
    <div class="my-not-skinned-class">This item will not change skin depending on layout!</div>
    <!-- Add content -->
</div>
<div class="header"><img [src]="layout.footerUrl" />
</div>

基于Angular中的URL的自定义视图

2 个答案: