Question

我目前正在尝试将类别结构合并到我正在构建的应用程序的菜单中。我有一个从API框调用类别的服务，这一切都运行正常，我已经在实现这个新功能之前返回并正确显示结果。目前我没有显示任何内容，控制台中没有错误。

这是我的app.component.ts

import { Component, OnInit }       from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { ProductComponent } from './components/product.component'

// Services
import { ProductService }  from './services/product.service';
import { CategoryService } from './services/category.service';

// Classes
import { Product } from './classes/Product';
import { Category } from './classes/Category';
import {serializeXmb} from "angular2/i18n";

// Directives
import { CategoryTree } from './directives/category-tree';

@Component({
    selector: 'product-display',

    templateUrl:'./app/views/category-view.html',

    directives: [
        ROUTER_DIRECTIVES,
        ProductComponent,
        CategoryTree
    ],
    providers: [
        ROUTER_PROVIDERS,
        ProductService,
        CategoryService
    ]
})

@RouteConfig([
    {
        path : '/dashboard',
        name : 'Product',
        component : ProductComponent,
        useAsDefault : true
    }
])

export class AppComponent {
    constructor(private _productService: ProductService, private _categoryService: CategoryService) {}

    title = 'Product Viewer';
    contentLoaded = false;
    categories = [];
    selectedCategory = null;
    selectedProduct = Product;
    products = [];
    APIError = [];

    getProducts() {
        this._productService.getProducts()
            .subscribe(
                products => {this.products = products},
                error    => {this.APIError = error},
                ()       => this.contentLoaded = true
            );
    }
    getCategories() {
        this._categoryService.getCategories({
            order           : 'asc',
            order_by        : 'name',
            sub_cats        : true,
            group_by_parent : true
        })
            .subscribe(
                categories => {this.categories = categories},
                error      => {this.APIError = error},
                ()         => this.contentLoaded = true
            );
    }
    selectCategory(category: Category) {
        this.selectedCategory = category
    }
    ngOnInit() {
        this.getProducts();
        this.getCategories();
    }
}

如您所见，我在CategoryService服务中调用一个函数，该函数返回我想在页面上显示的所有类别。由于这是一个aSync调用，我使用getCategories函数在返回时订阅Observer。

这是由组件调用的category-view-html，用于显示组件：

<div id='left-menu-wrapper'>
    <div id='left-menu'>
        <h1>{{title}}</h1>
        <h2>Categories</h2>
        <category-tree [categories]="categories"></category-tree>
        <div *ngIf="selectedCategory">
            {{selectedCategory.name}}
        </div>
    </div>
    <div *ngIf="!contentLoaded" class='spinner'></div>
</div>
<product-view [product]="selectedProduct"></product-view>

在这里你可以看到我试图称之为'category-tree'的指令。我还将它包含在app.component.ts指令属性中，该属性称为CategoryTree。我使用[categories] =“categories”行传递了我从服务中返回的类别。

这是我导入app.component.ts的CategoryTree指令：

import { Component, Input } from 'angular2/core';

@Component({
    selector: 'category-tree',
    templateUrl: './app/views/category-tree.html',
    directives: [CategoryTree]
})

export class CategoryTree {
    @Input categories;
}

如您所见，我定义了选择器并包含要使用的模板。然后我导出指令，指示categories属性是app.component.ts接受的输入。这是模板（尚未完成）。

<ul class="categories">
    <li *ngFor="#category of categories">
        <span (click)="selectCategory(category)" [class.selected]="category === selectedCategory">{{category.name}}</span>
        <ul *ngIf="category.sub_categories.length" class='sub-category' data-cat="category.id">
            <li *ngFor="#sub_category of category.sub_categories">
                <span (click)="selectCategory(sub_category)" [class.selected]="sub_category === selectedCategory">{{sub_category.name}}</span>
            </li>
        </ul>
    </li>
</ul>

由于某些原因，类别似乎没有显示，并且控制台中缺少错误导致我认为这可能是因为在从服务返回类别之前包含该指令？我认为这不会是一个问题，因为该指令订阅了Observable并且当Observable改变时会相应地自我更新？

谁能看到我在这里出错的地方？

由于

Answer 1

<强>更新

随着@NgModule的引入，directives向@NgModule forwardRef的迁移不再是必要的。

<强>原始

从@Component()装饰器看来，您在CategoryTree树中使用了Category，但该组件的模板并不明显。

如果要以递归方式使用组件，则需要使用forwardRef

import {forwardRef} from 'angular2/core'; 
// or @angular/core in newer Angular versions

并使用它：

directives: [forwardRef(() => CategoryTree)]

Answer 2

我解决了。它只是在类别树中@Input中缺少的一对括号：

export class CategoryTree {
    @Input categories;
    constructor() {
        console.log("i am category tree");
    }
}

应该是

我解决了。它只是在类别树中@Input中缺少的一对括号：

export class CategoryTree {
    @Input categories;
    constructor() {
        console.log("i am category tree");
    }
}

应该是：

  export class CategoryTree {
            @Input() categories;
            constructor() {
                console.log("i am category tree");
            }
        }

Angular2（Typescript）指令未显示传递给它的信息

2 个答案: