Я новичок в Angular и младший в целом, и у меня есть к вам вопрос.
Если у меня есть ввод, который задает пользователь, но мне нужно использовать ввод в другом представлении (другой шаблон), как мне это сделать?
Я прочитал много статей, но ни одна из них не помогла мне в моей ситуации.
Одна идея, о которой я читал и думал об использовании, быласоздание службы, которую я внедряю в шаблоны, где пользователю нужно установить значения или мне нужно их отобразить. В таком случае я могу писать в переменную и читать из нее, верно?
Вот пример кода формы ввода из шаблона:
<form>
<mat-form-field class="size">
<mat-label>Provide the customer name</mat-label>
<input matInput #customerName>
</mat-form-field>
</form>
Пользователь вводит имя клиента, и оносохранит его как переменную в файле машинописного текста, откуда я смогу использовать его в другом месте.
Основная идея: Как добавить поле ввода в качестве переменной машинописного текста и повторно использовать введенную переменную вразные шаблоны? Делая переменную глобальной? А как сделать такую вещь?
Надеюсь, я дал понять. Если что-нибудь, просто скажите, и я сделаю это так, чтобы было легче понять.
--- EDIT ---
В этих сообщениях ответят они на мою проблему, человек, который дал ответ на эту ссылку с кодом stackblitz, что, я полагаю, именно то, что я хотел, но я не могу заставить его работать с кодом HTMLЯ предоставил в своем сообщении ранее
Вот мой обновленный код: Компонент 1 TS файл
import { Component, OnInit } from '@angular/core';
import { VariablesService } from '../../variables.service';
import { Subject } from 'rxjs';
@Component({
selector: 'app-Step2',
templateUrl: './Step2.component.html',
styleUrls: ['./Step2.component.css']
})
export class Step2Component implements OnInit {
constructor(public variablesService: VariablesService) {
this.customerNameSource = this.variablesService.customerName;
}
ngOnInit() {
}
customerNameSource: Subject<string>;
customerName: string = "";
saveActions() {
this.variablesService.changeCustomerName(this.customerName);
}
}
Компонент 1 HTML-файл
<div>
<form>
<mat-form-field class="size">
<mat-label>Provide the customer name</mat-label>
<input matInput [(ngModel)]="customerName">
</mat-form-field>
</form>
</div>
<div class="next">
<button mat-button (click)="saveActions()" routerLink="/step1">Previous</button>
<button mat-button (click)="saveActions()" routerLink="/step3">Next</button>
</div>
Файл TS компонента 2
import { Component, OnInit } from '@angular/core';
import { VariablesService } from '../../variables.service';
import { Subject } from 'rxjs';
@Component({
selector: 'app-Step3',
templateUrl: './Step3.component.html',
styleUrls: ['./Step3.component.css']
})
export class Step3Component implements OnInit {
constructor(public variablesService: VariablesService) {
this.customerNameSource = this.variablesService.customerName;
this.customerNameSource.subscribe(value => {
this.customerName = value;
})
}
ngOnInit() {
}
customerNameSource: Subject<string>;
public customerName: string = "";
}
Файл HTML компонента 2
<div>
<h6>{{ customerName }}</h6>
</div>
<div class="next">
<button mat-button routerLink="/step2">Previous(test)</button>
<button mat-button routerLink="/step4">NEXT(test)</button>
</div>
Файл службы TS
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class VariablesService {
constructor() { }
_customerName: Subject<string> = new Subject();
get customerName() : Subject<string> {
return this._customerName;
}
set customerName(cstName: Subject<string>) {
this._customerName = cstName;
}
changeCustomerName(n: string) {
this.customerName.next(n);
}
}
Но все равно не работает должным образом - при вводе чего-либо на входе компонента 1 в компоненте 2 ничего не появляется *
Да, я добавил службу в качестве поставщика в app.module.ts