جاوااسکریپت - انگولار ارسال داده با استفاده از کامپوننت Input

من در حال تلاش برای یادگیری Angular 2 با استفاده از آموزشهای ویدئویی رایگان از وبسایت scotch.io هستم. من بیشتر بخشها را بدون هیچ مشکلی دنبال کردهام. اما نمیتوانم انتقال دادهها از یک کامپوننت به کامپوننت دیگر را انجام دهم.

یک فایل 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 دارم. اگر ایده یا نکتهای در مورد اینکه چگونه مشکل را اشکالزدایی یا حل کنم دارید، خیلی خوب خواهد بود.

متشکرم!

پاسخ شماره ۱

شما باید فقط AppComponent خود را بوتاسترپ کنید. کد خود را آزمایش کردهاید، و همانطور که به نظر میرسد، اگر هر دو کامپوننت را بوتاسترپ کنید، خطایی ایجاد نمیشود.

علاوه بر این، وقتی که آن رفع شد، شما نیاز دارید schemas را به ngModule خود اضافه کنید. این به این دلیل است که شما یک تگ سفارشی (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{}

در اینجا یک پلاَنکر کاری وجود دارد