为什么添加这个组件会破坏很多东西? (下面将介绍很多东西)

时间:2017-01-16 06:12:49

标签: html angular angular2-directives pure-css

我有以下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%确定我需要发布哪些人才能看到问题

其他信息

1 个答案:

答案 0 :(得分:2)

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

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

即可