Question

我正在尝试创建一个单独的组件来处理新闻提要的呈现。当我在app.component.ts中拥有所有内容时它工作正常，但是当我将代码分离到它自己的组件（news-feed.component.ts）时，它最初显示正常，但是当单击菜单按钮时（例如：{{1它无法识别函数＆＃39; getNews＆＃39;并生成以下错误：＆＃39; EXCEPTION：./AppComponent类中的错误AppComponent - 内联模板：4：12由以下原因引起：self.context.getNews不是函数＆＃39;

请注意 - 当网站首次加载时，它在NewsFeedComponent中成功运行了getNews（）函数。

这是app.component.ts：

＆＃13;

<button (click)="getNews('the-telegraph')">telegraph</button>

＆＃13;

这是news-feed.component.ts：

＆＃13;

import {Component} from '@angular/core';
import {NewsService} from './news.service';
import {Observable} from 'rxjs/Rx';

import { NewsFeedComponent }  from './news-feed.component';

@Component({
  selector: 'news-app',
  template:`
  <h1>News Feed</h1>
  <nav>
    <button (click)="getNews('bbc-news')">bbc</button>
    <button (click)="getNews('the-telegraph')">telegraph</button>
    <button (click)="getNews('the-guardian-uk')">guardian</button>
    <button (click)="getNews('independent')">independent</button>
    <button (click)="getNews('financial-times')">financial times</button>
    <button (click)="getNews('the-economist')">the economist</button>
    <button (click)="getNews('sky-news')">sky news</button>
    <button (click)="getNews('the-new-york-times')">the new york times</button>
  </nav>
  <news-feed></news-feed>
  `,
  styleUrls: ['app/app.component.css']
})
export class AppComponent {

}

＆＃13;

这是app.module.ts：

＆＃13;

import {Component} from '@angular/core';
import {NewsService} from './news.service';
import {Observable} from 'rxjs/Rx'

@Component({
  selector: 'news-feed',
  template: `
    <ul>
      <li *ngFor="let article of news">
      hello2
        <a href="{{article.url}}" target="_bank"><h2>{{article.title}}</h2></a>
        <p>{{article.publishedAt}}</p>
        <img src="{{article.urlToImage}}" style="width: 200px;">
        <p>{{article.description}}</p>
      </li>
    </ul>
  `
})
export class NewsFeedComponent {
  // public news;

  constructor(private _newsService: NewsService) { }
  ngOnInit() {
    this.getNews('bbc-news');
  }

  getNews(source) {
    this._newsService.getNews(source).subscribe(
      // the first argument is a function which runs on success
      data => { 
        this.news = data['articles']
      },
       error => {
         //console.error("Error saving food!");
         return Observable.throw(error);
       }
    );
  }
}

＆＃13;

在所有这些代码中切割和粘贴的道歉。我试图让这个工作在Plunker上，因为非常愚蠢而失败了。任何帮助将不胜感激。

Answer 1

在@echonax和@devqon提出的问题中，您从getNews调用了AppComponent，该NewsFeedComponent在您的子组件getNews中定义。如果这是问题，请尝试将函数<nav> <button (click)="newsFeed.getNews('bbc-news')">bbc</button> // all the same </nav> <news-feed #newsFeed></news-feed>移动到AppComponent。

而且，如果你只想调用子组件的功能，你可以这样做。

from django.conf.urls import url
from django.conf import settings
from django.contrib.auth.views import logout

urlpatterns = [
    url(r'^logout/$', logout, {'next_page': settings.LOGOUT_REDIRECT_URL}, name='logout')
]

Answer 2

您不应该从function test(age){ return age>=18 && age<=140; } console.log(test(18)); console.log(test(140)); console.log(test(12)); console.log(test(142)); html调用getNews函数（因为AppComponent在其上下文中不可用）。而你应该做的是，点击按钮你应该设置一些变量，如getNews，并将其作为输入绑定传递给你的feedType = 'bbc-news'。

它将使用news-feed绑定动态接收Feed类型，您可以使用选定的@Input

调用getNews方法

feedType

然后在<h1>News Feed</h1> <nav> <button (click)="feedType = 'bbc-news'">bbc</button> <button (click)="feedType = 'the-telegraph'">telegraph</button> <button (click)="feedType = 'the-guardian-uk'">guardian</button> <button (click)="feedType = 'independent'">independent</button> <button (click)="feedType = 'financial-times'">financial times</button> <button (click)="feedType = 'the-economist'">the economist</button> <button (click)="feedType = 'sky-news'">sky news</button> <button (click)="feedType = 'the-new-york-times'">the new york times</button> </nav> <news-feed [feedType]="feedType"></news-feed>组件

中添加Input属性绑定

news-feed

Angular2组件 - 无法识别功能

2 个答案: