Question

这似乎是一个愚蠢的问题，但我无法弄清楚我做错了什么。基本上我有一个列表模板，我想用[] =＆＃34;＆＃34;来传递几个参数。和@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组件中，来自：

的值

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

以未定义的方式回来。我哪里错了？

Answer 1

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

您也可以向我们展示您的./app/views/home/home.component.html吗？

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

1 个答案: