我正在尝试使用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 © 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的了解很少。如果您对如何调试或解决问题有任何想法或提示,那将是很好的。
谢谢!
我正在尝试使用scotch.io网站上的免费视频教程来学习Angular 2。我遵循了大部分内容,没有任何问题。但是我无法解决将数据从一个组件传递到另一个组件的问题。 ...
您只应引导您的AppComponent
。测试了您的代码,并且看起来,如果您同时引导这两个组件,则不会引发错误。