2017-03-04 48 views
2

我做了什么的总结是 1)创建一个简单的服务,存储一个字符串值。 2)在appModule中提供。 3)创建了2个组件:第1个和第2个组件。我没有提供组件中的服务 - 但通过构造函数注入服务。 4)增加2条路线在第一和第二之间进行导航。第一个组件将字符串保存到服务中,第二个组件应该从服务中检索已存储的字符串 - 这不起作用。 我已经研究了2天的解决方案,去了教程 - 看起来应该工作!这里没有解决答案似乎为我提供了一个清晰的解决方案。其他一切正在工作。导入没问题 - 浏览器中没有编译或运行时错误。角度2单身服务不为我工作

请帮忙。

下面是代码片段没有明显的进口:

// app.module.ts 
... 
const appRoutes: Routes = [ 
    {path: '', redirectTo: '/first', pathMatch: 'full'}, 
    {path: 'first', component: FirstComponent}, 
    {path: 'second', component: SecondComponent}, 
]; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    FirstComponent, 
    SecondComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot(appRoutes) 
    ], 
    providers: [DataService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 


// first component 
... 

import {DataService} from '../services/data.service'; 

@Component({ 
    selector: 'app-first', 
    templateUrl: './first.component.html', 
    styleUrls: ['./first.component.css'] 
}) 
export class FirstComponent implements OnInit { 
    localToken: string; 

    constructor(private svc: DataService) { } 

    ngOnInit() { 
    this.svc.save("000000"); 
    } 

} 


// second component 
... 
import {DataService} from '../services/data.service'; 

@Component({ 
    selector: 'app-second', 
    templateUrl: './second.component.html', 
    styleUrls: ['./second.component.css'] 
}) 
export class SecondComponent implements OnInit { 
    localToken: string; 

    constructor(private svc: DataService) { } 

    ngOnInit() { 
    // THIS DOES NOT WORK !!! 
    this.localToken = this.svc.retrieve(); 

    } 

} 

问:我在做什么错?

+0

你如何从一个组合导航到另一个组合?你是否改变了URL,这意味着你每次都刷新浏览器,那么它将无法工作。因为当你刷新时,你会清除所有的临时记忆。 – Smit

+0

你能否提供plnkr链接? – Gelidus

+0

您的服务必须是可注射的。你能否也请张贴代码来自Dataservice – Monicka

回答

0

如所解释的here服务必须被标记为注射

进口{注射}从 '@角/芯';

@Injectable()出口类HeroService {}

2

与西蒙娜的帮助下,我终于得到了单独服务工作正常!

  • 创建服务
  • 将其导入到的AppModule
  • 从组件(一个或多个)

    • 进口服务{}它添加到提供商阵列

    '{路径}';

  • 添加/把它注射到构造函数中 服务类型的私人PARM进口类中的成员方法为this.parm
  • 使用...

作品!谢谢西蒙娜

+0

我很乐意帮忙 – Monicka