Question

我正在尝试通过角度组件方法中的另一个div通过id更改div的内部HTML内容。我可以致电populateEndpointHomeContent()并获取该内容，但不能获取其他内容。实际上，单击时不会调用那些方法populateAddEndpoint()和populateAddEndpointForm。我也没有收到任何控制台错误。知道我怎么能得到这个吗？

endpoint.component.html

<div id="endpoint_home"></div>

<div id="endpoint_home_content" style="display:none">
    <button class="btn btn-sm" (click)="populateAddEndpoint();">+ Add Endpoint</button>
</div>

<!-- Add Endpoint DIVS Starts -->
<div id="add_endpoint_home" style="display:none">
    <form #endpointForm="ngForm">
        <section class="form-block">
            <div class="form-group">
                <label for="endPointType">Select Endpoint Type</label>
                <div class="select">
                    <select id="endPointType" (change)="populateAddEndpointForm(this.value);">
                        <option>MACHINE</option>
                        <option>K8S_CLUSTER</option>
                        <option>AWS</option>
                        <option>DOCKER</option>
                        <option>VCENTER</option>
                        <option>WAVEFRONT</option>
                        <option>VRNI</option>
                    </select>
                </div>
            </div>
            <div id="add_endpoint_form"></div>
            <button type="submit" class="btn btn-primary">ADD</button>
        </section>
    </form>
</div>
<div id="add_machine_form" style="display:none">
    <div class="form-group">
        <label for="name">Endpoint Name</label>
        <input type="text" placeholder="Endpoint Name" size="42" id="name" name="name" [(ngModel)]="name" required>
    </div>
    <div class="form-group">
        <label for="credentialsName">Credential Name</label>
        <div class="select">
            <select id="credentialsName">
                <option>MACHINE</option>
            </select>
        </div>
    </div>
    <button type="button" class="btn btn-primary">ADD CREDENTIAL</button>
    <div class="form-group">
        <label for="host">Machine Host/IP</label>
        <input type="text" placeholder="0.0.0.0" size="42" id="host" name="host" [(ngModel)]="host" required>
    </div>
    <div class="form-group">
        <label for="sshPort">SSH Port</label>
        <input type="number" placeholder="22" size="42" id="sshPort" name="sshPort" [(ngModel)]="sshPort" required>
    </div>
    <div class="form-group">
        <label for="timeout">SSH Timeout</label>
        <input type="number" placeholder="60" size="42" id="timeout" name="timeout" [(ngModel)]="timeout" required>
    </div>
    <div class="form-group">
        <label for="osType">OS Type</label>
        <div class="select">
            <select id="osType">
                <option>WINDOWS</option>
                <option>LINUX</option>
            </select>
        </div>
    </div>
</div>
<!-- Add Endpoint DIVS Ends -->

EndpointComponent

import { Component, OnInit } from '@angular/core';
import { EndpointService } from './endpoint.service';

@Component({
  selector: 'app-endpoint',
  templateUrl: './endpoint.component.html',
  styleUrls: ['./endpoint.component.scss']
})
export class EndpointComponent implements OnInit {

  constructor(private endpointService: EndpointService) { }

  public wavefrontendpoints: any;

  ngOnInit() {
      this.populateEndpointHomeContent();
      this.endpointService.getAllEndpoints().subscribe(res => this.wavefrontendpoints = res.response[0]);
  }

    public populateEndpointHomeContent() {
        document.getElementById('endpoint_home').innerHTML = document.getElementById('endpoint_home_content').innerHTML;
    }

    public populateAddEndpoint() {
      console.log('Inside populateAddEndpoint...');
      document.getElementById('endpoint_home').innerHTML = document.getElementById('add_endpoint_home').innerHTML;
    }

  public populateAddEndpointForm(endPointType) {
      console.log('Inside populateAddEndpointForm...');
      if(endPointType === 'MACHINE') { document.getElementById('add_endpoint_form').innerHTML = document.getElementById('add_machine_form').innerHTML; }

  }

}

Answer 1

尝试从innerHTML呈现HTML内容将无法使用其原型功能。

您的HTML将可见，但不会触发其点击事件，因为innerHTML仅包含HTML标记，而不包含函数或事件原型。

仔细阅读Dynamic Component Loader上的Angular指南，这是关于在HTML页面中加载动态内容。

通过角度组件方法中的id更改div内部HTML内容

1 个答案: