时间戳

首页 > 解决方案 > 如何在 Angular -5 中为一个输入单选按钮添加 2 (onclick)=""

angular - 如何在 Angular -5 中为一个输入单选按钮添加 2 (onclick)=""

问题描述

我在 Angular 5 中有 4 个组件。在第一个组件中，我有 3 个单选按钮，如果我们单击单选按钮，每个单选按钮都会通过 (click)= " " 转到其他组件，但单选按钮没有被选中，所以如何导航到其他组件如果我单击单选按钮，组件和单选按钮将一次检查？

<div class="form-group row form-bg">
    <label class="control-label col-sm-2">Item Type </label>
    <div class="col-sm">
        <label class="radio-inline" style="color: #fd6428; font-weight: bold;">
            <input type="radio"  name="stock" (click)="stock()"> Stock 
        </label>
        <label class="radio-inline">
           <input type="radio" name="nonStock"  (click)="nonStock()" > Non-Stock
        </label>
        <label class="radio-inline">
            <input type="radio" name="equipment"  (click)="equipment()"  > Equipment
        </label>
        <label class="radio-inline">
            <input type="radio" name="exchange" (click)="exchange()"  > Exchange
        </label>
        <label class="radio-inline">
            <input type="radio" name="loan" (click)="loan()" > Loan
        </label>
    </div>
</div>

.ts 文件：

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

@Component({
    selector: 'app-item-master-setup',
    templateUrl: './item-master-setup.component.html',
    styleUrls: ['./item-master-setup.component.scss']
})

/** item-master-setup component*/

export class ItemMaster {
    constructor(private router: Router) {}

    stock()
    {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-stock');
    }

    nonStock()
    {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-non-stock');
    }

    equipment() {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-equipment');
    }

    exchange() {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-exchange');
    }

    loan() {
        this.router.navigateByUrl('/itemmastersmodule/itemmasterpages/app-item-master-loan');
    }
}

标签： angularhtml

解决方案

从我能从你的代码中理解的任何内容：

HTML：

<input type="radio" name="stock" (click)="doSomething()" >

TS：

    doSomething() {
            setInterval(() => {
                this.router.navigateByUrl('url');
            }, 100);
        }

理想情况下，如果您只是更改页面一部分的视图并且单选按钮位于另一部分，则单选按钮上的选择应该保持不变。这意味着您的路由器插座应该与您的单选按钮组件分开放置。

推荐阅读