Winkel 2 Typoskript schaffen Singletone

Question

im neu Typoskript und Winkel 2 und was im Versuch zu tun ist Singletone erstellen verwendet werden, wo immer nötig ist, aber im immer diese Fehlermeldung:

Unexpected value 'ViewHelperComponent' declared by the module 'AppModule' 

im Browser-Log , Was mache ich falsch?

ist dies die Klasse:

export class ViewHelperComponent { 

static instance : ViewHelperComponent; 

constructor() {} 

public static getInstance(){ 
    if(ViewHelperComponent.instance == null) 
    ViewHelperComponent.instance = new ViewHelperComponent(); 
    return ViewHelperComponent.instance; 
} 

check(){ 
    console.log("working"); 
} 
} 

und aus dieser Komponente im Aufruf:

import { Component} from '@angular/core'; 
import { ViewHelperComponent } from '../view-helper/view-helper'; 
@Component({ 
    selector: 'app-input-parent', 
    templateUrl: './input-parent.component.html', 
    styleUrls: ['./input-parent.component.css'] 
}) 
export class InputParentComponent implements OnInit { 

temp : ViewHelperComponent; 

constructor() { 
    this.temp = ViewHelperComponent.getInstance() 
} 
} 

Answer 1

Es ist nicht erforderlich, einen Singleton manuell zu programmieren. Sie benötigen einen Singleton-Dienst, keine Komponente, und Angular erledigt das für Sie, wenn Sie nur den Anbieter für diesen Dienst im Modul angeben. Zum Beispiel können Sie die folgende Klasse erstellen:

class ViewHelper { 

    check(){ 
     console.log("working"); 
    } 
} 

es Deklarieren der Anbieter Eigentum von @NgModule:

@NgModule({ ... 
    providers: [ViewHelper] 
}) 

Jetzt können Sie es in jeder Komponente verwenden:

@Component({ 
    selector: 'app-input-parent', 
    templateUrl: './input-parent.component.html', 
    styleUrls: ['./input-parent.component.css'] 
}) 
export class InputParentComponent implements OnInit { 

constructor(private viewHelper: ViewHelper) { 
    this.viewHelper.check(); 
} 
} 

Wenn Wenn Sie den Provider in @NgModule deklarieren, wird Angular eine Singleton-Instanz davon erstellen.

Answer 2

häufig in der app.module.ts Datei, die Sie den 'ViewHelperComponent' im @NgModule bootstraping benötigen, für Beispiel:

@NgModule({ bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     ViewHelperComponent]... 

Grüße!