Question

我已经使用angular2-cli遵循angular2-mdl的安装说明，我认为一切都设置正确，我测试的组件渲染并正常运行。然后我尝试将应用程序布局排序和组件化，但遇到了一个问题。

使用mdl-layout-header标签时，我在控制台中收到以下错误：

zone.js：140 Uncaught TypeError：无法读取未定义的属性“name”

目前，我的app.component.html具有以下结构

<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed>
   <mdl-layout-header>
      <app-nav-bar></app-nav-bar>
   </mdl-layout-header>
   <mdl-layout-content>
     <!--<router-outlet ></router-outlet>-->
     Test
   </mdl-layout-content>
</mdl-layout>

我的nav-bar.component.html具有以下结构

<mdl-layout-header-row>
  <mdl-layout-title>My App</mdl-layout-title>
  <mdl-layout-spacer></mdl-layout-spacer>
  <!-- Navigation. We hide it in small screens. -->
  <nav class="mdl-navigation">
      <a class="mdl-navigation__link" >Link</a>
  </nav>
</mdl-layout-header-row>

如果删除mdl-layout-header标记，则错误消失，但标题也会消失。

如果它对我的app.module.ts有帮助，我确实导入并包含了MdlModule，并且我已经包含了所需的css文件，没有其他特定于angular2-mdl的导入。

非常感谢任何帮助！

感谢迄今为止所做的所有工作！

编辑：我目前正在使用angular-cli版本1.0.0-beta.16和angular2-mdl版本1.8.1。

我的app.module.ts看起来如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MdlModule } from 'angular2-mdl';

import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdlModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用导致TypeError的mdl-layout

0 个答案: