将不同的表单与Angular中的选择下拉列表集成

Question

我有三个不同的表单，其中第一个表单有一个带有两个值的选择下拉列表。。我想知道在选择一个下拉选项时，它必须打开另一个子窗体。我想知道如何才能做到这一点。

以下是具有下拉菜单的代码：

app.component.html

<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>

app.component.ts

import { Component } from '@angular/core';
interface Food {
value: string;
viewValue: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Food';
foods: Food[] = [
{value: '1', viewValue: 'value 1'},
{value: '2', viewValue: 'value 2'},
];
}

其他表单包含以下内容：

app.component.html

<h1>Value 1 is selected !!</h1>

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'form1';
}

请帮助我实现这一点：点击选择下拉选项后，应导航到另一个表单(在这种情况下，当从drowdown中选择值1时，应导航包含"选择值1"的新表单

Answer 1

您可以将输出放在垫子上，选择以检测值的变化：

<mat-select (selectionChange)="myMatSelectWasChanged($event)">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>

然后在.ts文件中，您可以导航到新表单：

export class AppComponent {
title = 'Food';
foods: Food[] = [
{value: '1', viewValue: 'value 1'},
{value: '2', viewValue: 'value 2'},
];
myMatSelectWasChanged(valueChange) {
// enter code here
}
}