为什么添加这个组件会破坏很多东西？（很多东西将在下面定义）

Question

我有如下所示的 3 个组件：

新闻-feed.component

用户-activity-item.component

用户-activity-list.component

两个 user-activity 组件都在新闻源组件的子目录中。此外，user-activity 项只是 user-activity-列表的成员。

一切正常，直到我将组件选择器 cg-user-activity-list 添加到 news-feed.component.html 文件。

添加该行后，我导航到的路线会显示新闻中的文本 -feed.component.html，但 activity 列表永远不会显示。此外，由于某种原因，URL 栏中的路线快速显示，就像它成功进入页面一样，然后返回到之前的路线（但停留在我想要的页面上）。

我是 Angular2 的新手，所以我希望有人会立即发现我的错误，但我已经看了几个小时了，还没有发现问题所在。

这是我的文件：

新闻-feed.component.ts

import { Component, OnInit } from '@angular/core';
import { UserActivityListComponent } from './user-activity-list/user-activity-list.component';

@Component({
  selector: 'cg-news-feed',
  templateUrl: './news-feed.component.html',
  styleUrls: ['./news-feed.component.css']
})
export class NewsFeedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

新闻-feed.component.html

<div class="pure-u-1">
    Activity Test Text
    <cg-user-activity-list></cg-user-activity-list>
</div>

用户-activity.item.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { UserActivity } from '../user-activity';

@Component({
  selector: 'cg-user-activity-item',
  templateUrl: './user-activity-item.component.html'
})
export class UserActivityItemComponent implements OnInit {
  @Input() userActivity: UserActivity;

  constructor() { }

  ngOnInit() {
  }

}

用户-activity.item.component.html

<div class="pure-u-1">
    testing user activity item component
    <h4>{{userActivity.name}}</h4>
    <p>{{userActivity.id}}</p>
</div>

用户-activity.list.component.ts

import { Component, OnInit } from '@angular/core';
import { UserActivity } from '../user-activity';
//import { UserActivityItemComponent } from './user-activity-item.component';

@Component({
  selector: 'cg-user-activity-list',
  templateUrl: './user-activity-list.component.html'
})
export class UserActivityListComponent implements OnInit {
  userActivities: UserActivity[] = [];
  userActivity = new UserActivity('John', '25');

  constructor() { }

  ngOnInit() {
  }

}

用户-activity.list.component.html

<div class="pure-u-1">
  testing user activity list component
  <cg-user-activity-item> [userActivity]="userActivity" </cg-user-activity-item>
</div>

如果我需要 post 有关该项目的更多信息，我可以，但是它相当大，所以我不是 100% 确定我需要 post 的人看到问题了。

附加信息。

以下控制台错误

EXCEPTION: Uncaught (in promise): Error: Error in ./UserActivityItemComponent class UserActivityItemComponent - inline template:2:8 caused by: 无法读取未定义的属性 'name' 类型错误：无法读取未定义的属性 'name' 在 _View_UserActivityItemComponent0.detectChangesInternal (/AppModule/UserActivityItemComponent/component.ngfactory.js:51:66) 在 _View_UserActivityItemComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56495:14) 在 _View_UserActivityItemComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56600:44) 在 _View_UserActivityListComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56521:19) 在 _View_UserActivityListComponent0.detectChangesInternal (/AppModule/UserActivityListComponent/component.ngfactory.js:52:8) 在 _View_UserActivityListComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56495:14) 在 _View_UserActivityListComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56600:44) 在 _View_NewsFeedComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56521:19) 在 _View_NewsFeedComponent0.detectChangesInternal (/AppModule/NewsFeedComponent/component.ngfactory.js:61:8) 在 _View_NewsFeedComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56495:14)

Answer 1

你的最后一段代码。我相信这就是问题所在。

user-activity.list.component.html

<div class="pure-u-1">
  testing user activity list component
  <cg-user-activity-item> [userActivity]="userActivity" </cg-user-activity-item>
</div>

应该是：

<cg-user-activity-item [userActivity]="userActivity"></cg-user-activity-item>

我可能是错的，很难说错在哪里。如果您可以从控制台添加错误，那就太好了。

编辑

看来你的userActivity还没有加载，试试：

<div class="pure-u-1">
    testing user activity item component
    <h4>{{userActivity?.name}}</h4>
    <p>{{userActivity?.id}}</p>
</div>

或者您可以将 *ngIf="userActivity" 添加到您的 div

为什么添加这个组件会破坏很多东西？（很多东西将在下面定义）

Why does adding this component break lots of stuff? (lots of stuff will be defined below)

html

angular

angular2-directives

pure-css

为什么添加这个组件会破坏很多东西？ （很多东西将在下面定义）

Why does adding this component break lots of stuff? (lots of stuff will be defined below)

html

angular

angular2-directives

pure-css

为什么添加这个组件会破坏很多东西？（很多东西将在下面定义）