Angular 2通过@Input（）传递参数到模板

Question

这看起来像一个愚蠢的问题，但我无法弄清楚我做错了什么。基本上我有一个列表模板，我希望使用[] =“”和@Input（）传递几个参数，使其更具动态性。例如：

<div class="listing wrapper"> 
    <div class="wrapper"> 
     <h2>Popular Adverts</h2> 

     <ad-listing [type]="popular" [count]="requiredCount" [order]="popularOrder"></ad-listing> 
    </div> 
</div> 

所以，在我的家乡组件我有：

import { Component, Output } from '@angular/core'; 
import { UserService } from '../../services/user.service'; 
import { AppSettings } from '../../AppSettings.component'; 
import { AdService } from '../../services/ad.service'; 
import { ToastService } from '../../services/toast.service'; 
import { Router } from '@angular/router'; 
import { Loading } from '../../services/loading.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app/views/home/home.component.html' 
}) 

export class HomeComponent { 
    @Output() popular: string = 'popular'; 
    @Output() popularOrder: string = ''; 
    @Output() recent: string = 'recent'; 
    @Output() recentOrder: string = '-created'; 
    @Output() requiredCount: number = 6; 


    constructor() { 

    } 
} 

我也试过：

import { Component } from '@angular/core'; 
import { UserService } from '../../services/user.service'; 
import { AppSettings } from '../../AppSettings.component'; 
import { AdService } from '../../services/ad.service'; 
import { ToastService } from '../../services/toast.service'; 
import { Router } from '@angular/router'; 
import { Loading } from '../../services/loading.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app/views/home/home.component.html' 
}) 

export class HomeComponent { 
    popular: string = 'popular'; 
    popularOrder: string = ''; 
    recent: string = 'recent'; 
    recentOrder: string = '-created'; 
    requiredCount: number = 6; 

    constructor() { 

    } 
} 

，然后在广告列表组件：

import { Component, Input } from '@angular/core'; 
import { AppSettings } from '../../../AppSettings.component'; 
import { AdService } from '../../../services/ad.service'; 
import { ToastService } from '../../../services/toast.service'; 
import { Router } from '@angular/router'; 
import { Loading } from '../../../services/loading.service'; 

@Component({ 
    selector: 'ad-listing', 
    templateUrl: './app/views/includes/listing/listing.component.html' 
}) 

export class AdListing { 
    ad_listing: any = []; 
    staticUrl: string = AppSettings.STATIC_RESOURCES; 
    @Input() 
    order: string = '-created'; 
    @Input() 
    count: number = 12; 
    @Input() 
    type: string; 

    constructor(private _adService: AdService, private _toast: ToastService, private _router: Router, private _loading: Loading) { 

     this._loading.showLoading(true); 
     this._adService.getAdListing(this.type) 
      .subscribe(
       res => { 
        this._loading.showLoading(false); 
        this.ad_listing = res; 
       }, 
       err => { 
        this._loading.showLoading(false); 
        this._toast.addToast('Oops..', 'Ads failed to load ads. Please try again.', 'error'); 
        // this._router.navigateByUrl('/'); 
        console.log(err); 
       } 
      ); 
    } 
} 

问题是，在我的AdListing组件中，t他的数值来自：

<ad-listing [type]="popular" [count]="requiredCount" [order]="popularOrder"></ad-listing> 

回到未定义状态。我哪里错了？

Answer 1

首先，我将逻辑移到ngOnInit() (ad-listing component)函数中，你试过了吗？

你也可以告诉我们你的./app/views/home/home.component.html吗？