TypeScript를 사용하여 Angular 2 구성 요소에서 모델 클래스를 어떻게 선언합니까?
저는 Angular 2와 TypeScript를 처음 접했고 모범 사례를 따르려고 노력하고 있습니다.
간단한 JavaScript 모델 ({})을 사용하는 대신 TypeScript 클래스를 만들려고합니다.
그러나 Angular 2는 그것을 좋아하지 않는 것 같습니다.
내 코드는 다음과 같습니다.
import { Component, Input } from "@angular/core";
@Component({
selector: "testWidget",
template: "<div>This is a test and {{model.param1}} is my param.</div>"
})
export class testWidget {
constructor(private model: Model) {}
}
class Model {
param1: string;
}
그리고 나는 그것을 다음과 같이 사용하고 있습니다.
import { testWidget} from "lib/testWidget";
@Component({
selector: "myComponent",
template: "<testWidget></testWidget>",
directives: [testWidget]
})
Angular에서 오류가 발생합니다.
예외 : testWidget : (?)의 모든 매개 변수를 확인할 수 없습니다.
그래서 모델이 아직 정의되지 않았다고 생각했는데 ... 맨 위로 이동하겠습니다!
지금을 제외하고는 예외가 발생합니다.
원래 예외 : 모델 제공 업체 없음!
이 작업을 어떻게 수행합니까 ??
편집 : 모든 답변에 감사드립니다. 그것은 나를 올바른 길로 인도했습니다.
이것을 생성자에 삽입하려면 컴포넌트의 제공자에 추가해야합니다.
이것은 작동하는 것 같습니다.
import { Component, Input } from "@angular/core";
class Model {
param1: string;
}
@Component({
selector: "testWidget",
template: "<div>This is a test and {{model.param1}} is my param.</div>",
providers: [Model]
})
export class testWidget {
constructor(private model: Model) {}
}
나는 이것을 시도 할 것이다 :
모델을 다음과 같은 별도의 파일로 분할합니다 model.ts.
export class Model {
param1: string;
}
구성 요소로 가져옵니다. 이렇게하면 다른 구성 요소에서 사용할 수 있다는 추가 이점을 얻을 수 있습니다.
Import { Model } from './model';
구성 요소에서 초기화합니다.
export class testWidget {
public model: Model;
constructor(){
this.model = new Model();
this.model.param1 = "your string value here";
}
}
html에서 적절하게 액세스하십시오.
@Component({
selector: "testWidget",
template: "<div>This is a test and {{model.param1}} is my param.</div>"
})
최신 도구 및 기술에 적응하는 것이 중요하기 때문에 @PatMigliaccio 의 의견을 답변에 추가하고 싶습니다 .
사용하는 경우
angular-cli전화를 걸면ng g class model생성됩니다. 모델이 원하는 이름으로 대체됩니다.
당신은 추가하지 않은 것을 문제 거짓말 Model로 중 하나 bootstrap(이 싱글 만들 것이다) 또는에 providers구성 요소 정의의 배열 :
@Component({
selector: "testWidget",
template: "<div>This is a test and {{param1}} is my param.</div>",
providers : [
Model
]
})
export class testWidget {
constructor(private model: Model) {}
}
그리고 예, Model위에 정의해야 합니다 Component. 그러나 자신의 파일에 저장하는 것이 좋습니다.
그러나 여러 인스턴스를 생성 할 수있는 클래스가되기를 원한다면 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() {}
}
귀하의 경우에는 동일한 페이지에 모델이 있지만 Component 클래스 뒤에 선언 했으므로을 forwardRef참조하는 데 사용해야 합니다 Class. 이것을 선호하지 않고, 항상 model별도의 파일에 개체를 가지고 있습니다.
export class testWidget {
constructor(@Inject(forwardRef(() => Model)) private service: Model) {}
}
또한 올바른 개체를 참조하기 위해 보간법을 변경해야합니다.
{{model?.param1}}
더 좋은 방법은 Model클래스를 다른 파일에 정의한 다음 필요할 때이를 수행하여 가져올 수 있다는 것입니다. 또한 export클래스 이름을 가져 와서 가져올 수 있습니다.
import { Model } from './model';
내 코드는
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 = "";
}
}
}
html은 다음과 같습니다.
<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>
@brendon의 답변에 대한 의견으로 angular-cli를 사용할 수 있습니다.
다음을 시도해 볼 수도 있습니다.
ng g class modelsDirectoy/modelName --type=model
/* will create
src/app/modelsDirectoy
├── modelName.model.ts
├── ...
...
*/
마음에 곰 : ng g class ! == ng g c
그러나, 당신이 사용할 수있는 ng g cl귀하의 각도-CLI 버전에 따라 바로 가기로.
이것이 다소 오래된 질문이라는 것을 알고 있지만 테스트 위젯 클래스에 모델 변수를 잘못 추가했음을 지적하고 싶었습니다. Model 변수가 필요한 경우 구성 요소 생성자를 통해 전달하면 안됩니다. 귀하는 그러한 방식으로 서비스 또는 기타 유형의 주사제를 전달하기위한 것입니다. 다른 구성 요소 내부에서 테스트 위젯을 인스턴스화하고 모델 개체를 전달해야하는 경우 각도 코어 OnInit 및 입력 / 출력 디자인 패턴을 사용하는 것이 좋습니다.
예를 들어, 코드는 실제로 다음과 같아야합니다.
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
}
}
A class which is essentially just a struct/model should not be injected, because it means you can only have a single shared instanced of that class within the scope it was provided. In this case, that means a single instance of Model is created by the dependency injector every time testWidget is instantiated. If it were provided at the module level, you would only have a single instance shared among all components and services within that module.
Instead, you should be following standard Object Oriented practices and creating a private model variable as part of the class, and if you need to pass information into that model when you instantiate the instance, that should be handled by a service (injectable) provided by the parent module. This is how both dependency injection and communication is intended to be performed in angular.
Also, as some of the other mentioned, you should be declaring your model classes in a separate file and importing the class.
I would strongly recommend going back to the angular documentation reference and reviewing the basics pages on the various annotations and class types: https://angular.io/guide/architecture
You should pay particular attention to the sections on Modules, Components and Services/Dependency Injection as these are essential to understanding how to use Angular on an architectural level. Angular is a very architecture heavy language because it is so high level. Separation of concerns, dependency injection factories and javascript versioning for browser comparability are mainly handled for you, but you have to use their application architecture correctly or you'll find things don't work as you expect.
export class Car {
id: number;
make: string;
model: string;
color: string;
year: Date;
constructor(car) {
{
this.id = car.id;
this.make = car.make || '';
this.model = car.model || '';
this.color = car.color || '';
this.year = new Date(car.year).getYear();
}
}
}
The || can become super useful for very complex data objects to default data that doesn't exist.
. .
In your component.ts or service.ts file you can deserialize response data into the model:
// Import the car model
import { Car } from './car.model.ts';
// If single object
car = new Car(someObject);
// If array of cars
cars = someDataToDeserialize.map(c => new Car(c));
'Programing' 카테고리의 다른 글
| 스트림을 열지 못했습니다 : HTTP 래퍼가 쓰기 가능한 연결을 지원하지 않습니다. (0) | 2020.10.29 |
|---|---|
| 배열로 선택하는 방법은 psql의 값 절을 포함합니다. (0) | 2020.10.29 |
| 다양한 WPF 바인딩 모드는 무엇입니까? (0) | 2020.10.29 |
| Rails에서 로컬 파일의 내용을 변수로 읽어들입니다. (0) | 2020.10.29 |
| 종속성별로 종속 된 개체를 정렬하는 방법 (0) | 2020.10.29 |