Question

我有一个home组件和默认的app组件。

在AppComponent类中，我有一个名为ninjaApp的对象和一个名为yell()的方法。

我想显示ninjaApp的属性，并在yell()组件中调用home。（自定义属性和事件绑定）。

它运作良好，直到我添加了路由。

home.component.ts：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  @Input() ninjaApp;
  @Output() onYell = new EventEmitter();

  propertyBindingEx1 = "property binding ex1";
  propertyBindingEx2 = "property binding ex2";
  ninja = {
    name: "josh",
    belt: "black"
  };

  eventB(myVal) {
    alert(myVal);
  };

  fireYellEvent(e) {
    this.onYell.emit(e);
  };


  constructor() { }

  ngOnInit() {
  }

}

home.component.html：

<p>
  home works!
</p>

<ng-content></ng-content>
<br>
<br>

<!-- Property binding -->

<input value="{{propertyBindingEx1}}">
<input [value]="propertyBindingEx2">

<!-- Event binding -->

<button (click)="eventB('go go go event binding')"> Event binding! </button>

<!-- 2-way data binding -->

<br><br><br>
<input [(ngModel)]= "ninja.belt">

<p>{{ninja.name}}</p> <!-- this is property binding -->
<p>{{ninja.belt}}</p>

<p>{{ninjaApp.name}}</p> <!-- Custom property binding -->
<button (click)="fireYellEvent($event)">Make me Yell</button> <!-- Custom event binding -->

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'app works! yahhhhhhhooooo';

  ninjaApp = {
    name: "ruy",
    belt: "red"
  };

  yell(e){
    alert("I am Yelling!")
  };

}

app.component.html：

<h1>
  {{title}}
</h1>

<!--
<app-home [ninjaApp]="ninjaApp" (onYell)="yell($event)"> this is some info to be shown later as ng-content </app-home>
-->

<router-outlet ></router-outlet>

这是路由文件 app.routes.ts ：

import { Routes, RouterModule } from "@angular/router";
import { DirectoryComponent } from "./directory/directory.component";
import { HomeComponent } from "./home/home.component";


const APP_ROUTES: Routes = [
 {
  path: 'directory',
  component: DirectoryComponent,
 },
 { path: '',
  component: HomeComponent
 },
];

export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);

最后， 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 { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DirectoryComponent } from './directory/directory.component';

import {APP_ROUTES_PROVIDER} from "./app.routes";


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

控制台显示此错误：

EXCEPTION: Uncaught (in promise): Error: Error in ./HomeComponent class HomeComponent - inline template:25:3 caused by: Cannot read property 'name' of undefined
Error: Error in ./HomeComponent class HomeComponent - inline template:25:3 caused by: Cannot read property 'name' of undefined

感谢您的帮助！

路由后自定义绑定停止工作

0 个答案: