在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
   }
  }

,

更新： 问题是我正在将信息从搜索中的方法发送到布局中的方法，并且数据不会通过布局中的插值打印。为了解决这个问题，我只是将数据返回到原始搜索方法，然后通过插值将其打印出来。谢谢大家的帮助！