如何解决在Angular 10中的组件之间传递信息console.log有效,但插值无效
我在将用于插值的信息传输到叔叔/阿姨组件时遇到了麻烦。 我的组件是这样组织的:
src -> app -> layout
-> modules -> search
我的搜索组件可以用插值法很好地打印信息,但是当它将信息发送到布局时,信息可以很好地到达但不能用插值法打印。
export class SearchComponent implements OnInit {
name:string = "default";
layout:LayoutComponent = new LayoutComponent();
public changeName(input:string)
{
this.name = input; //prints out fine with interpolation
this.layout.printJSON(input); //calls the function in question
}
}
此代码在{{name}}的帮助下,可以毫无困难地打印出给出的值。但是,当调用printJSON()时,该函数将使用console.log打印,但是插值失败{{searchResults}}。
export class LayoutComponent implements OnInit{
searchResults: string = "hello";
public printJSON(name:string){
if(name){
console.log(name); //prints out the correct string
this.searchResults = name; //doesn't print out with interpolation
}
}
}
编辑:这是我在其中调用changeName()的HTML。
<div class="content" role="main">
<div *ngIf="!layout.mySearch">
<span><h2 color="black">Find an organization</h2></span>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form class="example" [formGroup]="profileForm" (submit)='changeName(myInput.value); mySearch=true; myImage = false'><!--square brackets one way binding-->
<input type="text" placeholder="Search.." name="search" formControlName='firstName' #myInput>
<button type='submit'><i class="fa fa-search"></i></button>
</form>
<span><h4 color="black"><div>Advanced Search</div></h4></span>
</div>
因此,在这里,传递给此搜索按钮的字符串由#myInput保存,并通过提交搜索按钮传递给changeName()。最后一行是{{name}},它会成功打印出我在搜索栏中输入的所有内容。
解决方法
您可以使用ngOninit
中的帮助功能来实现此目的
ngOnInit()中的代码,似乎工作正常
通过这些更改,可以实现插值。这也是一个有效的示例Interpolation Example
export class AppComponent implements OnInit {
searchResults: string = "hello";
name:string = "Ananymous";
data_name:string;//helper property to hold data for better understanding
ngOnInit() {
this.name="Saad"//hard corded naem for example
if(name){
console.log(name); //prints out the correct string
this.data_name = this.name; //you said your code works till here and prints data in ngOnInit()? now lets create another helper function.
}
this.interPolateData(this.data_name)//helper function
}
interPolateData(name:string){
this.searchResults = name //interpolation works now please check
}
}
,
更新: 问题是我正在将信息从搜索中的方法发送到布局中的方法,并且数据不会通过布局中的插值打印。为了解决这个问题,我只是将数据返回到原始搜索方法,然后通过插值将其打印出来。谢谢大家的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。