Angular 6 - избавиться от ограничений Input-декоратора - PullRequest
Новая
       31

Angular 6 - избавиться от ограничений Input-декоратора

0 голосов
/ 26 сентября 2018

Входной декоратор используется для связи от родителя к ребенку.Это то, что мы пишем в родительском компоненте.

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-componentet.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>

Я хочупередать отфильтрованные данные оповещения из компонента alertcomponent компоненту alertdetails с помощью @ input

...