Как изменить HTML / CSS дочернего компонента от родительского в Angular 2+? - PullRequest
Новая
       57

Как изменить HTML / CSS дочернего компонента от родительского в Angular 2+?

1 голос
/ 23 декабря 2019

У меня есть директива компонента, которая переводит кучу запросов в таблицу. Есть ли способ условно добавить текст (как HTML, так и CSS) к указанной строке в этом дочернем компоненте из логики родителя?

(родительский): 

<body>
   <child-component></child-component>
</body>

(дочерний): 

<div *ngfor = "let record in records">
   <table>
     <tr>
       <td> Class: {{ alias }} </td>
     </tr>
   </table>
</div>

Уточнение: если я хочу добавить или отредактировать HTML / CSS строки с помощьюпсевдоним foo через родительский код и показать: Class: foo (in-session)

Редактировать: под «тегом» я не имел в виду кодовый тег (т. е. <p>), я имел в виду добавленный текст.

1 Ответ

1 голос
/ 23 декабря 2019

Вы можете найти решение через декоратор @Input() angular в сочетании с присвоением класса dynamic scss/css angular. В вашем дочернем компоненте вы можете назначить динамическое css следующим образом: 

`[ngClass]="{'CSS-CLASS': CONDITION-HERE,'CSS-CLASS':CONDITION-HERE}"`

В вашем конкретном случае дочерний component.html: 

<div *ngfor = "let record in records">
   <table>
     <tr>
       <td> [ngClass]="{'foo': record==record.name=='foo'}" {{ alias }} </td>
     </tr>
   </table>
</div>

PS: - Вы можетеизмените условие для класса ' foo ' в соответствии с вашими потребностями.

В вашем дочернем component.ts: 

   export class ChildComponent implements OnChanges {

      @Input() public rercord: any[];


      constructor() {
      }
   }

Всякий раз, когда вы хотите использовать дочерний компонент в родительском компоненте, просто используйте следующее: 

<body>
   <child-component [records]="fetchedRecords"></child-component>
</body>

Внутри родительского component.ts: 

export class ParentComponent {

         public fetchedRecords: any;


          constructor(public myService:MyService) {
          this.myService.getValues().subscribe((rowData)=>{
            this.fetchedRecords = rowData;
           });
          }
       }
...