0
这看起来像一个愚蠢的问题,但我无法弄清楚我做错了什么。基本上我有一个列表模板,我希望使用[] =“”和@Input()传递几个参数,使其更具动态性。例如:Angular 2通过@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>
回到未定义状态。我哪里错了?
是将它移动到ngOnInit()工作。我在想,为什么这不是工作大声笑:D – TSlegaitis