使用 Input 組件的 Angular Pass 數據

Question

我正在嘗試使用scotch.io網站上的免費視頻教程來學習 Angular 2。 我按照大多數部分沒有任何問題。 但是我無法將數據從一個組件傳遞到另一個組件。

app.component.html 中列出了用戶配置文件。 當用戶單擊用戶鏈接時，它應該顯示文本輸入，用戶可以在其中更改名稱。

這是app.component.html

<header>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">My Angular 2 App</a>
    </div>
  </nav>
<main>

  <div class="row">
    <div class="col-sm-4">
      <div *ngIf="user_list">
        <ul class="list-group users-list" >
          <li class="list-group-item" *ngFor="let user of user_list"
          (click)="selectUser(user)"
          [class.active] = "user == active_user">{{user.name}}</li>
        </ul>
      </div>
    </div>
    <div class="col-sm-8">

      <user-profile [user] = "active_user"></user-profile>

      <div class="jumbotron gocrazy" *ngIf="!active_user">
        <span class="glyphicon glyphicon-hand-left"></span>
        <h2>Choose a user from the left menu </h2>
      </div>
    </div>
  </div>


</main>

<footer class="text-center">
  Copyright &copy; 2016
</footer>

這是user-profile.component.ts文件。

import {Component, Input} from '@angular/core';
import {User} from '../shared/model/user';

@Component({
  selector : 'user-profile',
  template : `
  <div class="jumbotron gocrazy" *ngIf="user">
    <h1>Welcome to our app</h1>
    <p>{{user.name}}</p>
    <p>{{message}}</p>
    <input class="form-control" [(ngModel)] = "user.name" />
  </div>
  `
})

export class UserProfileComponent{
  @Input() user : User;
}

這是app.component.ts文件。

import {Component} from '@angular/core';
import {User} from './shared/model/user';

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html',
  styleUrls : ['./app/app.component.css']
})

export class AppComponent {
  message : string = "Hello, How are you?";

  user_list : User[] =[
  {
    name : "Thilini Weerasooriya",
    age : 27,
    id : 2
  },
  {
    name : "Aurelia",
    age : 23,
    id : 2
  }];

  active_user : User;

  selectUser(user){
    this.active_user = user;
  }

}

這是app.module.ts文件。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {UserProfileComponent} from './users/user-profile.component';

@NgModule({
  imports : [BrowserModule, FormsModule],
  declarations : [AppComponent, UserProfileComponent],
  bootstrap : [AppComponent, UserProfileComponent]
})

export class AppModule{}

文件夾結構如下。

我沒有收到任何錯誤。

我知道我應該調試代碼，但我對 Angular 和 TypeScript 知之甚少。 如果您對如何調試或解決問題有任何想法或技巧，那就太好了。

謝謝！

Answer 1

您應該只引導您的AppComponent 。 測試了您的代碼，看起來，如果您引導兩個組件，則不會引發錯誤。

此外，當它被修復時，你需要向你的 ngModule 添加schemas 。 這是因為您創建了一個自定義 (html) 標簽，該標簽未被識別為“普通”html 標簽。 如果您不聲明它，您的應用程序將拋出錯誤，因為它無法識別您的自定義標簽。 話雖如此，你的 ngModule 應該是這樣的：

//import CUSTOM_ELEMENTS_SCHEMA
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {UserProfileComponent} from './users/user-profile.component';

@NgModule({
  imports : [BrowserModule, FormsModule],
  declarations : [AppComponent, UserProfileComponent],
  bootstrap : [AppComponent]
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // add this!
})

export class AppModule{}

這是一個工作的plunker