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

Question

我有以下3个组件：

新闻-feed.component

用户 - 活性 - item.component

用户 - 活性 - list.component

两个用户活动组件都位于news-feed组件的子目录中。此外，用户活动项只是user-activity-list的成员。

所有内容都有效，直到我将组件选择器 cg-user-activity-list 添加到 news-feed.component.html 文件中。

添加该行后，我导航到的路径会在news-feed.component.html中显示该文本，但活动列表永远不会显示。此外，由于某种原因，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>

如果我需要发布有关该项目的更多信息，我可以，但它相当大，所以我不能100％确定我需要发布哪些人才能看到问题

其他信息

• 控制台错误

  EXCEPTION：未捕获（在承诺中）：错误：./UserActivityItemComponent类中的错误UserActivityItemComponent - 内联模板：2：8导致：无法读取属性＆＃39; name＆＃39;未定义的 TypeError：无法读取属性＆＃39; name＆＃39;未定义的     at _View_UserActivityItemComponent0.detectChangesInternal（/AppModule/UserActivityItemComponent/component.ngfactory.js:51:66）     at _View_UserActivityItemComponent0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56495:14）     at _View_UserActivityItemComponent0.DebugAppView.detectChanges（http://localhost:4200/main.bundle.js:56600:44）     at _View_UserActivityListComponent0.AppView.detectViewChildrenChanges（http://localhost:4200/main.bundle.js:56521:19）     at _View_UserActivityListComponent0.detectChangesInternal（/AppModule/UserActivityListComponent/component.ngfactory.js:52:8）     at _View_UserActivityListComponent0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56495:14）     at _View_UserActivityListComponent0.DebugAppView.detectChanges（http://localhost:4200/main.bundle.js:56600:44）     at _View_NewsFeedComponent0.AppView.detectViewChildrenChanges（http://localhost:4200/main.bundle.js:56521:19）     at _View_NewsFeedComponent0.detectChangesInternal（/AppModule/NewsFeedComponent/component.ngfactory.js:61:8）     at _View_NewsFeedComponent0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56495:14）

Answer 1

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

用户-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

即可