特定组件中的Angular 2声明 [英] Angular 2 declarations in specific component

问题描述

我上次使用Angular2时，指令仍然存在，但是现在app.modules.ts中有所谓的声明.问题是，如果我仅在特定组件中而不是在主要组件上使用指令，该怎么办?

customers.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-customers',
    templateUrl: 'app/customer/customers.component.html'
})

export class CustomersComponent {
    customers = [
    { id: 1, name: 'Mix'},
    { id: 2, name: 'Ian'},
    { id: 3, name: 'Aniel'},
    { id: 4, name: 'Jess'},
    { id: 5, name: 'Jusi'},
    ];
}

customer.component.ts

import { Component, Input } from '@angular/core';

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

export class CustomerComponent {
    @Input() customer: {id: number, name: string};

    myColor = 'gray';
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { CustomerComponent } from './customer/customer.component';
import { CustomersComponent } from './customer/customers.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, CustomerComponent, CustomersComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

我在想什么，当我在声明中放置一个组件时，每个组件都可以访问它，而以前我只能在特定的声明中进行访问.如果我在这里错了，请纠正我，并建议在声明指令时是否有更好的选择.

解决方案

您可以将组件声明放入功能模块应导入到应用模块.

现在，如果您认为您的组件是一个功能并且是否需要单独的模块，则由您决定.
我知道模块中的所有内容都没有指令中的那么简单明了，但是Angular2中有一些设计问题无法通过其他方式解决.

文档: https://angular.io/guide/feature-modules

Last time I use Angular2 the directives are still present but now there is so called declarations in app.modules.ts. Question is, if I am going to use a directive only in specific component and not on the main, how can I do that?

customers.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-customers',
    templateUrl: 'app/customer/customers.component.html'
})

export class CustomersComponent {
    customers = [
    { id: 1, name: 'Mix'},
    { id: 2, name: 'Ian'},
    { id: 3, name: 'Aniel'},
    { id: 4, name: 'Jess'},
    { id: 5, name: 'Jusi'},
    ];
}

customer.component.ts

import { Component, Input } from '@angular/core';

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

export class CustomerComponent {
    @Input() customer: {id: number, name: string};

    myColor = 'gray';
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { CustomerComponent } from './customer/customer.component';
import { CustomersComponent } from './customer/customers.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, CustomerComponent, CustomersComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

What am I thinking is when I put a component in a declaration, every component can access that unlike before that I can only declare it in a specific. Please correct me if I'm wrong here and please suggest if there is a better alternative in declaring directives.

解决方案

You can put the component declaration into a Feature Module.
The Feature Module should be imported into the App Module.

Now it's up to you if you consider that your component it's a feature and deserve a separate Module or not.
I'm aware that all this thing with the modules is not so simple and clear as it was with the directives, but there were some design things in Angular2 that couldn't be resolved in other way.

Documentation : https://angular.io/guide/feature-modules

这篇关于特定组件中的Angular 2声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！