Question

（欢迎任何人重新回答我的问题，我不确定该如何措辞）

假设我创建了一个Angular组件，如下所示：

<app-my-test></app-my-test>

如何通过仅在组件中输入选项来允许用户设置选项的开启和关闭，就像这样：

<app-my-test booleanCheck></app-my-test>

然后在我的.ts文件中，如果他们添加booleanCheck，我希望它为true；如果他们没有添加，我希望它为false。下面是一个闪电战。目标是让console.log记录true（如果添加了booleanCheck，如果没有添加false，则记录<app-my-test booleanCheck="true"></app-my-test> <app-my-test [booleanCheck]="true"></app-my-test>。

https://stackblitz.com/edit/angular-xr3p84?file=src%2Fapp%2Fapp.module.ts

我不希望这是答案：

CString Str3 = "123" + Str1;

Answer 1

您可以@Transactional public void methodTest{ a.insertIntoDbTableOne(); b.insertIntoDbTableTwo(); } public void methodTestTwo{ try{ System.out.println("Start"); methodTest(); }catch(Throwable e){ e.printStackTrace(); System.out.println("This is the catch statement"); }finally{ System.out.println("this is finally"); } }中的leverage中的setter，如果@Input可用，则会被调用。

input

工作副本在这里-https://stackblitz.com/edit/angular-9ubmg7

Answer 2

您将必须创建一条指令，该指令将在主机组件中为您设置属性（请注意，该属性可能不再是@Input）：

StackBlitz demo

@Component({
  selector: 'my-test',
  templateUrl: './app.test.html',
  styleUrls: [ './app.test.css' ]
})
export class TestComponent implements OnInit {
  public booleanCheck: boolean;

  ngOnInit() {
    console.log('ngOnInit');
    console.log(this.booleanCheck);
  }
}

@Directive({
   selector: '[booleanCheck]' 
})
export class BooleanCheck {
  constructor(@Host() @Self() @Optional() host: TestComponent) {
      host.booleanCheck = true;
  }
}

（有关更简单的解决方案，请查看here）

Answer 3

一种解决方案可能是检查变量booleanCheck是否未定义。这将console.log(this.booleanCheck)一个空字符串：

<app-my-test booleanCheck></app-my-test>

这将console.log(this.booleanCheck)未定义

<app-my-test></app-my-test>

因此您可以使用它来分配false if undefined和true if it is an empty string

Answer 4

由于您要将属性传递给自定义组件，因此无法像您希望的那样添加它。您正在将输入传递给自定义组件，它应该像

<app-my-test [booleanCheck]="true"></app-my-test>

在您的组件中可以像

@Input() booleanCheck;

如果它是true / false，则可以启用/禁用日志。

希望我回答了你的问题。

角度自定义组件属性设置

4 个答案: