0

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

新闻提要组件

用户活动item.component

用户活动列表组件

两个用户活动组件都在新闻源组件的子目录中。此外，用户活动项目只是用户活动列表的成员。

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

添加该行后，我导航到的路线会显示 news-feed.component.html 中的文本，但活动列表永远不会显示。此外，由于某种原因，URL 栏中的路由很快显示出来，就像它成功到达页面一样，然后返回到上一个路由（但停留在我想要的页面上）。

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

这是我的文件：

新闻提要.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>

用户活动.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() {
  }

}

用户活动.item.component.html

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

用户活动.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() {
  }

}

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>

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

附加信息。

4

1 回答 1

2

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

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

于 2017-01-16T06:36:33.870 回答