Wie deklariere ich eine Modellklasse in meiner Angular 2-Komponente mit TypeScript?

Liegt das problem, dass Sie noch nicht Hinzugefügt Model entweder die bootstrap (die machen es zu einem singleton), oder die providers array der Komponente definition:

@Component({
    selector: "testWidget",
    template: "<div>This is a test and {{param1}} is my param.</div>",
    providers : [
       Model
    ]
})

export class testWidget {
    constructor(private model: Model) {}
}

Und ja, Sie sollte definieren Model über die Component. Aber besser wäre es, um es in seine eigene Datei.

Aber wenn Sie wollen, dass es nur eine Klasse aus, die Sie erstellen können mehrere Instanzen, die Sie besser verwenden Sie einfach new.

@Component({
    selector: "testWidget",
    template: "<div>This is a test and {{param1}} is my param.</div>"
})

export class testWidget {

    private model: Model = new Model();

    constructor() {}
}

InformationsquelleAutor der Antwort PierreDuc

mein code ist

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

class model {
  username : string;
  password : string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})



export class AppComponent {

 username : string;
 password : string;
  usermodel = new model();

  login(){
  if(this.usermodel.username == "admin"){
    alert("hi");
  }else{
    alert("bye");
    this.usermodel.username = "";
  }    
  }
}

und das html geht das so :

<div class="login">
  Usernmae : <input type="text" [(ngModel)]="usermodel.username"/>
  Password : <input type="text" [(ngModel)]="usermodel.password"/>
  <input type="button" value="Click Me" (click)="login()" />
</div>

InformationsquelleAutor der Antwort Ahmed Basha

Ich weiß, dies ist eine etwas ältere Frage, aber ich wollte nur darauf hinweisen, dass Sie haben, fügen Sie der Modell-Variablen in den test widget-Klasse falsch. Wenn Sie ein Modell variabler, sollten Sie nicht versuchen, Sie zu passieren, durch das Komponenten-Konstruktor. Sie sind nur dazu gedacht, zu übergeben, Dienstleistungen oder andere Arten von Injektionen, die Art und Weise. Wenn Sie instanziieren Ihre test-widget innerhalb der anderen Komponente und übergeben zu müssen, ein Modell-Objekt als, ich würde empfehlen, mit den eckigen Kern OnInit-und Eingabe/Ausgabe-design-patterns.

Als Beispiel, dein code sollte eigentlich so Aussehen:

import { Component, Input, OnInit } from "@angular/core";
import { YourModelLoadingService } from "../yourModuleRootFolderPath/index"

class Model {
    param1: string;
}

@Component({
    selector: "testWidget",
    template: "<div>This is a test and {{model.param1}} is my param.</div>",
    providers: [ YourModelLoadingService ]
})

export class testWidget implements OnInit {
    @Input() model: Model; //Use this if you want the parent component instantiating this
        //one to be able to directly set the model's value
    private _model: Model; //Use this if you only want the model to be private within
        //the component along with a service to load the model's value
    constructor(
        private _yourModelLoadingService: YourModelLoadingService //This service should
        //usually be provided at the module level, not the component level
    ) {}

    ngOnInit() {
        this.load();
    }

    private load() {
        //add some code to make your component read only,
        //possibly add a busy spinner on top of your view
        //This is to avoid bugs as well as communicate to the user what's
        //actually going on

        //If using the Input model so the parent scope can set the contents of model,
        //add code an event call back for when model gets set via the parent
        //On event: now that loading is done, disable read only mode and your spinner
        //if you added one

        //If using the service to set the contents of model, add code that calls your
        //service's functions that return the value of model
        //After setting the value of model, disable read only mode and your spinner
        //if you added one. Depending on if you leverage Observables, or other methods
        //this may also be done in a callback
    }
}

Einer Klasse, die ist im Grunde nur eine struct-Modell sollte nicht injiziert werden, da es bedeutet, können Sie nur einen einzigen gemeinsamen Instanzen dieser Klasse im Rahmen ist es vorgesehen war. In diesem Fall bedeutet, dass eine einzelne Instanz des Modells entsteht durch den dependency injector jedes mal testWidget instanziiert wird. Wenn es an der Modul-Ebene, Sie hätten nur eine einzige Instanz, die gemeinsam von allen Komponenten und services innerhalb des Moduls.

Stattdessen sollten Sie folgende standard Object-Oriented practices und erstellen ein eigenes Modell variable als Teil der Klasse, und wenn Sie benötigen, um Informationen in dieses Modell beim erstellen der Instanz, behandelt werden sollten, die von einem Dienst (injizierbaren), bereitgestellt durch das übergeordnete Modul. Dies ist, wie dependency injection und Kommunikation soll durchgeführt werden in eckige.

Auch, wie einige der anderen erwähnt, sollten Sie die Erklärung Ihrer model-Klassen in eine separate Datei und importieren Sie die Klasse.

Ich würde dringend empfehlen, geht zurück auf den kantigen Referenz-Dokumentation und die überprüfung des Grundlagen-Seiten auf die verschiedenen Anmerkungen und Klasse Typen:
https://angular.io/guide/architecture

Sollten Sie Ihre Aufmerksamkeit insbesondere auf die Abschnitte über Module, Komponenten und Dienstleistungen/Dependency Injection wie diese sind unerlässlich, um zu verstehen, wie zu verwenden Winkel auf einem architektonischen Niveau. Winkel ist ein sehr Architektur schwere Sprache, weil es so hohen Niveau. Die Trennung von Bedenken, dependency injection, Fabriken und javascript Versionskontrolle für browser Vergleichbarkeit sind hauptsächlich für Sie verarbeitet, aber Sie müssen verwenden Sie Ihre Anwendungsarchitektur richtig, oder du wirst Dinge finden, die nicht so funktionieren wie Sie es erwarten.

InformationsquelleAutor der Antwort user2904660