无法将数据从一个模块组件发送到另一个模块组件
Posted
技术标签:
【中文标题】无法将数据从一个模块组件发送到另一个模块组件【英文标题】:not able to send the data from one module component to another module component 【发布时间】:2019-04-14 09:03:14 【问题描述】:我想将布尔值设置为 true 到另一个模块组件,我将在其中将 *ngIf
值设置为 true 以启用 html 内容。它正在导航到另一个组件,但无法启用 html 内容。我已经尝试过 viewchild,emitters,input, output 但无法达到预期的结果。
调用组件:
SuccessGet(res)
this.logs = res;
for(let item of this.logs)
if(item._email == this.log._email && item._password == this.log._password)
alert("Login Successful");
this.wt.LoginCall(true); // here calling the other module component
this.log = new LoginModel();
被调用的组件:
export class WeatherComponent
title = 'TemperatureApp';
//@Input() messagetochild_weather ;//to get the message from parent
showweather : boolean = false;
// showweather : boolean = false;
bus : BusinessLogic = new BusinessLogic();
WeatherModel : Weather = new Weather();
WeatherModels : Array<Weather> = new Array<Weather>();
num : number = 0;
LoginCall(item : boolean)
//this.ngAfterViewInit();
this.showweather = item;
ngAfterViewInit(item : any): void
this.WeatherModels = this.bus.Load();
HTML:
<div *ngIf=showweather class="card">//here i am using *ngIf
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
<div class="card-body">
<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i class="fa fa-plus fa-2x"
aria-hidden="true"></i></a></span>
<table class=" table table-bordered table-responsive-md table-striped text-center table-responsive-sm" style="border-block-end-color:dodgerblue">
<tr style="background-color: rgb(0, 255, 255)">
<th class="text-center">Area Code</th>
<th class="text-center" >Date</th>
<th class="text-center">Country</th>
<th class="text-center">State</th>
<th class="text-center">City</th>
<th class="text-center">Temperature</th>
<th class="text-center">Action</th>
<th class="text-center">Action</th>
</tr>
【问题讨论】:
什么是this.wt
?您要使用的*ngIf
在哪里?
@ user184994 : wt 是我调用的组件的一个实例。编辑内容以显示我使用 *ngIf 的 html 内容。
直接与 with 组件交互并不是正确的做法。相反,您应该创建一个服务来处理交互,正如@SureshKumarAriya angular.io/guide/component-interaction 所建议的那样
【参考方案1】:
您应该使用主题/行为主题。
服务:
private statusValue = new Subject<Boolean>();
statusValue$ = this.statusValue.asObservable();
updateStatus(status)
this.statusValue.next(status);
组件 1:
this.service.updateStatus(true);
组件2:
this.service.statusValue$.subscribe(value=>console.log(value);
【讨论】:
以上是关于无法将数据从一个模块组件发送到另一个模块组件的主要内容,如果未能解决你的问题,请参考以下文章
将 React.FunctionComponent<React.SVGProps<SVGSVGElement>> 作为道具发送到另一个组件