标签: angular-input

我复制了一个简单的stackblitz，演示了我遇到的问题。问题是我有一个父组件将布尔值传递给子组件。这个布尔值是子组件上的@Input。需要注意的是，父组件使用ChangeDetectionStrategy.OnPush。子组件没有显式设置。

当父组件在订阅方法中更改子组件的布尔输入属性时，子组件最初不会检测到更改。总是需要单击 2 次才能让子组件检测到更改。

但是，当我在订阅方法之外更改子组件的布尔输入属性时，子组件会正确检测到更改，并且一切都会按预期工作（单击 1 次子组件即可识别更改）。

App.Component.ts（父组件）

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent  {
  constructor(private http: HttpClient) {

  }
  public isHelloVisible: boolean;
  public useHttpGet: boolean;

  showHello() {
    if (this.useHttpGet) {
    this.http.get('https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/cc0e3799790b0b34bdeb6fef28c3daf7/17.447409200000003,-78.3724573?units=si').subscribe(data => {
      this.isHelloVisible = true;  
    });
    } else {
      this.isHelloVisible = true;
    }
  }

  closeHello() {
    this.isHelloVisible = false;    
  }

子组件（Hello.component.ts）

@Component({
  selector: 'hello',
  template: `<div *ngIf="showHello">
    Hello
    <div (click)="closeHello()">Click me to close Hello</div>
  </div>
  
  `, …

我的所有控件都使用有角度的材料。我们需要禁用自动完成功能，以便以前输入的任何值都不会显示。我的代码如下。我尝试了自动完成“关闭”“禁用”以及我在网上找到的其他建议。但似乎没有任何作用。

<mat-form-field
  [ngClass]="{ 'invalid-uinque-id': (form.errors.locatorId || form.errors.locatorIdInvalidBadge) }"
  id="sta_BadgeFormField"
>
  <input
    formControlName="locatorId"
    (blur)="onBlurLocatorVendorMethod(selectedVendor.id)"
    matInput
    i18n-placeholder="Locator Badge ID|Placeholder for locator badge id label in add staff dialog@@addstaffLocatorBadgeId"
    placeholder="Locator Badge ID"
    name="locatorId"
    maxlength="20"
    [errorStateMatcher]="esMatcher"
    autocomplete="disabled"
  /> 
</mat-form-field>

我有一个如下所示的图表组件：

<div id="chart">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

我正在通过它的父 div 来操作该图表的所有样式，其中有id="chart"，但我需要在父组件中使用同一组件 2 次！所以这会产生相同的 2 个 id 的问题。

因此，我决定从父组件传递 div 的 id，如下所示@Input()：

<div class="container">
    <!-- Other tags -->
    <child-component [chartId]="users"></child-component>
    <!-- Other tags -->
    <child-component [chartId]="visuals"></child-component>
    <!-- Other tags -->
</div>

编辑子组件：

TS 文件：

@Input() chartId: string;

HTML：

<div [id]="chartId">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

我尝试了这些技术： [id]="chartId", …

我正在尝试创建这样的通用控件

动态控制

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

@Component({
  selector: 'ngo-button',
  template: `<button [ngClass]=class type={{type}}>{{message}}</button>`,
  styles: [`.one{border:solid 2px yellow} .two{background-color:pink} .three{
  background-color: blue;
}`]
})
export class HelloComponent  {
   @Input() type: string = 'button';
  @Input() class: string = 'one three';
  @Input() message: string = 'submit';
}

main-component.html

<ngo-button [class]='btn two' (click)='somefunc()'></ngo-button>

现在我想将两个类传递给按钮，但是当我试图以这种方式传递它时，我得到了错误

[class] ='btn two'

我想，我们不允许在输入参数中添加空间，还有另一种实现方法吗？

这是stackblitz链接