Question

在我工作的Angular 2示例项目中（来自Visual Studio 2015），我为子组件添加了自定义服务的提供程序，但是当我运行项目时，我在Google调试器中收到错误消息子组件中没有myService的提供程序，并且该特定组件不会呈现。但是，如果在根组件级别声明myService的提供程序，则项目将在没有此错误消息的情况下运行，并且子组件将呈现。这是子组件中的代码，它不是渲染但应该（称为home.component.ts） - 2个子组件包含在父组件的ul选项卡排列中。练习是不呈现第二个子组件，但是呈现第一个子组件（home.component.ts）

import { Component } from '@angular/core';
import { UserPreferencesService } from '../employee/userPreferences.service';

@Component({
    //--note no selector in this child component and this div is not rendering but will render if I declare the provider at the root level

    template: `<h1>This is the home page</h1>
        <div>
            Colour Preference :
            <input type='text' [(ngModel)]='colour' [style.background]='colour' />
        </div>
    `,
    providers: [UserPreferencesService]
})

export class HomeComponent {
    //--this is the Dependency Injection version of the serive
    constructor(private _userPreferencesService: UserPreferencesService) {

    }

    get colour(): string {
        return this._userPreferencesService.colourPreference;
    }

    set colour(valueX: string) {
        this._userPreferencesService.colourPreference = valueX;
    }

}

这里是父组件中的（缩写）代码（称为app.compoent.ts）

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

@Component({
    selector: 'my-app',
    template: `    
    .....
    <list-employee></list-employee>
    <br /><br />
     Your Text : <input type='text' [(ngModel)]='userText'/>
     <br /><br />
     <simple [simpleInput]='userText'></simple>

     <!--this is the div section that won't render when declaring the provider
     //--in child component (home).  The Employees child component is supposed to error out -->
     <div style="padding:5px">
         <ul class="nav nav-tabs">                        
             <li routerLinkActive="active"> <a [routerLink]="['/home']">Home</a> </li>
             <li routerLinkActive="active"> <a [routerLink]="['employees']">Employees</a> </li>
             <br />
                <router-outlet></router-outlet>
          </ul>
       </div>

     </div> 

     `
})
export class AppComponent {  
    ......

这里是根组件（称为app.module.ts），其中包含@ngModule指令

......
import { EmployeeService } from './employee/employee.service';
import { UserPreferencesService } from './employee/userPreferences.service';

const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'employees', component: EmployeeListComponent },
    { path: 'employees/:code', component: EmployeeComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    //imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes, { useHash: true }) ]
    imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ],
    declarations: [AppComponent, EmployeeComponent, EmployeeListComponent, EmployeeTitlePipe, EmployeeCountComponent, SimpleComponent, HomeComponent, PageNotFoundComponent ],
    bootstrap: [AppComponent],
    providers: [EmployeeService]
    //providers: [EmployeeService, UserPreferencesService] -- when I declare this provider in  the child component I am getting the error message -- if I add UserPreferenceService here in the root then both child components will render and no error message
})
export class AppModule { }

要么我在其中一个components.ts中遗漏了某些东西，要么存在一些Angular 2语法问题 - 我注意到在教程中我有时候会在各行中包括/排除括号。如何解决此错误 - 没有myService的提供程序？

Angular 2 ERROR错误：没有myService的提供者！依赖注入问题

0 个答案: