Angular 2將HTML附加到主體

我開發了一個角度cli項目並獲得了許多表單來驗證。顯示時，我需要在應用根的外側附加表單驗證消息。我目前的實施情況如下。Angular 2將HTML附加到主體

<app-root class="" _nghost-c0="" ng-version="4.3.4"> 
    <!-- other html content goes here...... --> 
     <form [formGroup]="form"> 
      <label for="name">Name: </label> 
      <input type="text" [formControl]="nameCtrl"/> 
       <div *ngIf="!nameCtrl.valid && nameCtrl.hasError('required')" 
        class="error"><validation-msg>Name is required.</validation-msg></div> 
       <div *ngIf="!nameCtrl.valid && nameCtrl.hasError('badName')" 
        class="error"><validation-msg>Name must start with <tt>pee</tt>.</validation-msg></div> 
     </form> 
    <!-- other html content goes here...... --> 
    </app-root>

我只需要在html中顯示如下所示的錯誤信息。 validation-msg是具有簡單模板的組件。該內容必須附加到應用程序根目錄之外。

<app-root class="" _nghost-c0="" ng-version="4.3.4"> 
     <!-- other html content goes here...... --> 
    </app-root> 
    <validation-msg-content> 
     <div>Name is required.</div> 
    </validation-msg-content>

來源

2017-09-06 Janith Widarshana

我不對Angular知之甚少，但你會需要一種「臨時解決方法」來實現這一點。也許在_if_中插入一些腳本標籤？ –

您基本上需要將數據從一個組件傳遞到另一個組件。你可以在這裏閱讀更多關於它的信息https://angular.io/guide/component-interaction – KIA

請檢查更新後的問題。它不是關於組件之間共享數據。它是關於將組件模板附加到app-root元素的pout一側。 –

如果是主要組件，那麼您將無法做到這一點。但是，如果此表單本身就是一個組件，那麼您可以將錯誤消息發送給包含表單組件的父組件。

您需要在窗體組件中使用@Output，並且可以將錯誤消息發送到父組件。現在當父組件收到事件時，它可以顯示錯誤消息。

所以表單組件的代碼應該是這樣的：

import { Component, Input, Output, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'myform', 
    templateUrl: './myform.component.html', 
    styleUrls: ['./myform.component.css'] 
}) 

export class MyFormComponent { 
    @Output() sendData:any = new EventEmitter(); 

    validateForm(){ 
     this.sendData.emit({error}); 
    } 

}

而父組件的HTML

<myform (sendData)="getError($event)"></myform>

現在，您可以定義getError方法：

getError(event:Event){ 
    //Do whatever you want 
}

來源

2017-09-06 04:52:57 Rajan471

請檢查編輯的問題。這不是傳遞給其他組件的數據。它是關於在app-root元素旁邊添加html的。 –

如果'app-root'是主'appComponent'，那麼'validation-msg-content'必須是另一個模塊。我不確定你是否可以在兩者之間進行溝通。 eassy的解決方案是將「validation-msg-content」移動到「app-root」中，併爲表單創建另一個「組件」。 – Rajan471

請檢查ng-bootstrap.github.io/#/components/popover/examples正文部分的追加彈出窗口。我需要將我的信息添加到身體。 –

Angular 2將HTML附加到主體

回答

相關問題