Question

全部。

我有一个控制添加新记录的组件。记录的添加由模式内部的表单处理。我想单击一个按钮，然后将打开模式并从用户那里获取数据。当他们单击模式内部的“保存”按钮时，该组件将管理通过服务将数据发送到后端。

我选择的方法是将用于添加记录的组件的指令包括在app.component的HTML中：

<div id="list">
  <div style="padding-bottom: 1em">
    <h2>List of Events:</h2>
  </div>

  <app-calendar></app-calendar>

  <p style="margin-top: 20px"><button class="btn btn-primary" data-model="modal" data-target="#exampleModal">Add Event</button></p>
</div>

<div id="details">
    <add-event></add-event>
</div>

应用日历获取事件并将其显示在列表组中。这很好。 add-event组件的模板中包含来自getbootstrap的示例模式代码：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

问题是，单击按钮不会执行任何操作，并且控制台中没有错误。我想念什么？我的期望是，使用ID属性，我应该能够与添加事件模板进行交互。我是否需要导入添加事件组件，然后向其发送消息以显示模式信息？那会是什么样？我尝试将[hidden]绑定到add-event中的一个属性，然后将按钮上的（click）事件绑定到调用add-event中的一个函数，该函数将属性从true更改为false，但这也不起作用。 / p>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'event-detail',
  templateUrl: './event-detail.component.html',
  styleUrls: ['./event-detail.component.css']
})
export class EventDetailComponent {
  isHidden;

  constructor() {
    this.isHidden = true;
  };

  showDetailModal() {
    this.isHidden = false;
  };
}

在这种情况下，我设置了一个模板变量。

角度显示嵌套组件中的模态

0 个答案: