Question

我最近开始接受angular2，我正在开发一个简单的navegation网络应用程序。我想在导航菜单中按一个选项，div将根据用户选择使用不同的html文件进行更新。

我在最后一部分遇到了麻烦。

这是我的页面布局：

+-----------------------------------------------------------+
|                     header                                |
+-----------------+-----------------------------------------+
|                 |                                         |
|                 |         my-content-area                 |
|    menu         |                                         |
|                 |                                         |
|                 |                                         |
+-----------------+-----------------------------------------+
|                    footer                                 |
+-----------------------------------------------------------+

我已经正确更新了点击事件，但是我已经使用了templateUrl，因为我无法让它变得模糊，而且我一直在寻找的答案非常复杂我有简单的设计（我希望尽可能简单）。

这是我的nav-details.component.ts：

import { Component, Input } from '@angular/core';
import { NavOption } from './nav.option';

@Component({
  moduleId: module.id,
  selector: 'my-content-area',
  templateUrl: '{{ navoption.view_name }}'
})

export class NavDetailComponent {
  @Input()
  navoption: NavOption;
}

这不起作用，因为我收到404错误，说找不到文件{{ navoption.view_name }}而不是带路径名的变量值。

Answer 1

你的做法是错误的。要更改内容视图，最好使用组件路由。 @Component装饰器中的元数据不是动态的。

因此，您无法更改DetailComponent的模板，但您可以更改Component本身。

因此，您将拥有2个不同的组件，其中包含您的2个不同的模板。

您的app.component.html应与此类似。

<your-header-component>Header</your-header-component>
<your-menu-component>Menu</your-menu-component>

<router-outlet></router-outlet> // in the router-outlet directive your active component will be placed.

<your-footer-component></your-footer-component>

然后你的app.module.ts也包含你的路线。

import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';

@NgModule({
    declarations: [
        AppComponent,
        YourHeaderComponent,
        YourMenuComponent,
        YourFooterComponent,
        FooComponent,
        BarComponent
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(
            {
                path: '',
                component: FooComponent
            },
            {
                path: 'bar',
                component: BarComponent
            }
        ])
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

FooComponent和BarComponent是您在内容区域中拥有的组件的占位符。如果浏览器路由与bar路径匹配，那么BarComponent将被放置在router-outlet指令中，否则将FooComponent置于其中。

要通过链接更改路线，您必须将routerLink指令添加到a - 代码。

在your-menu-component.component.html

中

<nav>
    <a [routerLink]=''>Foo</a>
    <a [routerLink]='/bar'>Bar</a>
</nav>

要阅读有关角度2路由的更多信息，请阅读this

Dymanic templateUrl作为视图处理程序

1 个答案: