我有两个角度分量,如果单击第一个中的搜索按钮,则必须显示其中一个。但是不幸的是,我所做的代码无法正常工作,只有当我手动更改布尔值“ clicked”时才能工作。 有人可以帮我吗?
我的组件的结构是这样的:
src
|app
|components
|FilterBarComponent
|LogTableComponent
FilterBarComponent中搜索按钮的代码:
<button class="btn-search text-center" (click)="buttonStatus =
!buttonStatus">Search</button>
FilterBarComponenet.ts:
export class FilterBarComponent implements OnInit {
buttonStatus: boolean;
constructor(private logsService: HttpClientTestService) {
this.buttonStatus = false;
}
LogsTableComponent.ts:
import { Component, OnInit } from '@angular/core';
import { FilterBarComponent } from './../filter-bar/filter-bar.component';
@Component({
selector: 'app-logs-table',
templateUrl: './logs-table.component.html',
styleUrls: ['./logs-table.component.css']
})
export class LogsTableComponent implements OnInit {
clicked: boolean;
constructor(private filterBar: FilterBarComponent) { }
ngOnInit() {
}
getButtonStatus() {
this.clicked = this.filterBar.buttonStatus;
}
}
LogsTableComponent.html:
<div class="container-fluid p-2" *ngIf="clicked">
答案 0 :(得分:0)
我在代码的任何地方都看不到函数getButtonStatus
被调用。可能就是这个问题。我猜你需要用ngOnInit
来称呼它。
另外,您正在通过构造函数将一个组件注入另一个组件。那不是有角度的,您应该通过服务。
答案 1 :(得分:0)
我有一个结构:
`-App Component
-Log Table Component
-Filter Bar Component`
应用程序组件负责日志和过滤器组件之间的通信
app.component.ts
`export class AppComponent {
public clickedEvent: boolean;
childEventClicked(event: boolean) {
this.clickedEvent = event;
}
}`
app.component.html
`<div style="text-align:center">
<app-filter-bar (eventClicked)="childEventClicked($event)"></app-filter-bar>
<app-log-table [clicked]="clickedEvent"></app-log-table>
</div>`
filter-bar.component.ts
`export class FilterBarComponent implements OnInit {
public buttonStatus: boolean = false;
@Output() eventClicked: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor() { }
ngOnInit() {
}
onClick(event: boolean): void {
this.buttonStatus = !event;
this.eventClicked.emit(this.buttonStatus);
}
}`
filter-bar.component.html
<button class="btn-search text-center" (click)="onClick(buttonStatus)">
button status: {{buttonStatus}}
</button>
log-table.component.ts
export class LogTableComponent implements OnInit {
@Input() clicked: boolean;
constructor() { }
ngOnInit() {
}
}
log-table.component.html
<div class="container-fluid p-2" *ngIf="clicked">Test</div>
检查此答案