表单标签中的 ng-content

Question

我有一个表单组件，里面有 <ng-content> 标签和 btn，目前什么都不做。我还有一个父组件，将其与简单输入一起用作内容投影。

问题是，每当我点击按钮时，父组件和表单组件都会重新加载，并且页面会以初始状态刷新。

formComponent.html:

<form class="form-control">
   <div class="form-group">
     <ng-content></ng-content>
      <button type="submit">Search</button>
   </div>
</form>

parentComponent.html:

<app-form-component>
   <input type="text" [(ngModel)]="car.id">
</app-form-component>

我觉得我错过了内容投影的一些基本知识。

Answer 1

仅供参考，问题是您已将按钮类型声明为提交

 <button type="submit">Search</button>

因此，如果您将按钮类型声明为提交，它将像这样提交表单。我也遇到过这类问题。所以只需替换，

html 文件

  <button type="button" (click)="doLogic()">Search</button>

ts 文件

doLogic(){
   //do your logics here.
}

希望它能解决您的问题。让我们试试这个，让我知道。

谢谢，

穆苏库玛

ng-content in form tag