Angular 6-摆脱输入装饰器的限制

Question

输入修饰符用于从父级到子级的通信。这就是我们在父组件中编写的内容。

1. ParentComponentCode

<h1>Parent Component HTML part</h1>
 <app-child [childVariable] = "parentvariable"></app-child>


 //Parent.ts
 export class ParentComponent implements OnInit {
 parentvariable = "Hello Child";
 constructor() { }    
 }

2. ChildComponentCode

@Component({
selector: 'app-child',
 template: '<div>
          <h3>I am inside child component.</h3>
        </div>',     
})
 export class ChildComponent implements OnInit {

 @Input() childVariable;
 constructor() { }    
 }

因此，在上面的代码中，我们在父组件中使用了子组件指令。这意味着在父组件中，子模板的所有html内容都会按原样反映。这意味着父组件中的行将在父组件的控制台中显示我在子组件中。。  所以输出将是这样

  

父组件HTML部分

我在孩子里面   组件。

我的问题是，我们可以采取任何方式来使用此@input装饰器，以便将值从父级传递到子级。 在我的代码中，我的子组件html部分是一个非常长且复杂的代码。 所以，如果我在父组件中使用该子选择器，则整个子组件视图都将打印在父组件内部，这不是我的目标。  我只想将值从父母传递给孩子。帮帮我。

alert-componet.html

<div class="table-responsive">
      <table *ngIf="tableShowFlag == true" [ngClass]="{'alertsidenav':tableFlag === true}" class="table table_view_land alertable">
        <!-- (matSortChange)='sortedData($event)' -->
        <!-- matSort (matSortChange)='sortData($event)' -->
        <thead>
          <tr>
            <th></th>
            <th></th>
            <!-- <th mat-sort-header="os">OS -->
            <th>OS
              <!-- <span>
                <img class="sortimg" src="assets/images/sort.png">
              </span> -->
            </th>
            <th>Host</th>
            <th>IP Address</th>
            <th>Domain</th>
            <th>Alerted</th>
            <th>Threat</th>
            <th>Actions</th>
          </tr>
        </thead>

        <tbody>
          <tr (mouseleave)="flagArray[i] = true; classArray[i] = false;" *ngFor="let alert of filteredAlertData;let i = index;"
            [ngClass]="getSynchClass(alert.synched)">
            <td>
              <mat-checkbox></mat-checkbox>
            </td>
            <td> <img style="cursor:pointer;" class="iconclick" (click)="getDetailsOnAlert(alert.alertId); drawer.open(); tableFlag = true;"
                _ngcontent-c4="" src="../../assets/images/icon.png"></td>
            <td>{{alert.hostResponse.osname}}</td>
            <td>{{alert.hostResponse.hostName}}</td>
            <td>{{alert.hostResponse.primaryIPaddress}}</td>
            <td>{{alert.hostResponse.domain}}</td>
            <td>{{alert.reportedAtTimestamp | date : "short"}}</td>
            <td>
              <div class="buttonWrapper">
                <button mat-button class="btn btn-borderorg" style="top: 5px;" type="button">{{alert.sourceAsAlertType}}</button>
                <div [hidden]="flagArray[i]" class="box">
                  <a style="color: rgba(7, 123, 218, 0.952)">Contain</a>
                  <a style="color: rgba(7, 123, 218, 0.952)">Triage</a>
                  <a style="color: rgba(7, 123, 218, 0.952)">File Acq</a>
                  <a style="color: rgba(7, 123, 218, 0.952)">Acquistion</a>
                </div>
              </div>
            </td>
            <td>
              <div>
                <button (mouseenter)="classArray[i] = true; flagArray[i] = false" class="btn actionButton"
                  [ngClass]="{'setOpacity':classArray[i] === true}">
                  <img src="assets/images/dots.png">
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

alertdetails.html

             <div class="caseDetailtab">
                 <div class="casedetailTable">
                    <table class="table table_view_land">
                      <thead>
                        <tr>
                          <th><b>Scan Details</b></th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>                            
                         <tr>
                          <td>Scanned Object</td>
                           <td>File</td>
                        </tr>
                      </tbody>
                    </table>
               </div>

                <div class="casedetailTable">
                    <table class="table table_view_land">
                      <thead>
                        <tr>
                          <th><b>Malware Details</b></th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>                             
                        <tr>
                          <td>Malware Type</td>
                           <td>Potentially unwanted program</td>
                        </tr>

                      </tbody>
                    </table>
               </div>


                  <div class="casedetailTable">
                    <table class="table table_view_land">
                      <thead>
                        <tr>
                          <th><b>File Details</b></th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Status</td>
                           <td>Alert</td>
                        </tr>
                         <tr>
                          <td>File Path</td>
                           <td>C:\Folder1\Folder2\gg.exe</td>
                        </tr>
                         <tr>
                          <td>MDS</td>
                           <td>F1wewe9232293ssmdsd32323</td>
                        </tr>
                        <tr>
                          <td>SHA1</td>
                           <td>F1wewe9232293ssmdsd32323</td>
                        </tr>

                            <tr>
                          <td>File Last Accesed</td>
                           <td>08/08/2018, 6:56 pm (PST</td>
                        </tr>
                      </tbody>
                    </table>
               </div>                     
         </div>

我想使用@input将filterAlertData从alertcomponent传递到alertdetails组件