如何将 child 组件的 HTML/CSS 从 Angular 2+ 中的 parent 更改？

Question

我有一个组件指令，可以将一堆请求转换为 table。有没有办法根据 parent 的逻辑有条件地将文本（HTML 和 CSS）附加到此 child 组件中的指定行？

(parent):

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

(child):

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

澄清：如果我想通过 parent 的代码附加或编辑别名 foo 的行的 HTML/CSS 并显示：Class: foo (in-session)

编辑："tag"，我指的不是代码标签（即 <p>），而是附加文本。

Answer 1

您可以通过 angular 的 @Input() 装饰器结合 dynamic scss/css class 在 angular 中分配来提出解决方案。在您的 child 组件中，您可以通过这样

分配动态 css

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

在你的具体情况下 child component.html:

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

PS:- 您可以根据需要编辑 class 'foo' 的条件。

在你的childcomponent.ts:

   export class ChildComponent implements OnChanges {

      @Input() public rercord: any[];


      constructor() {
      }
   }

只要你想在 parent 组件中使用 child 组件，只需使用以下内容：

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

里面parentcomponent.ts:

export class ParentComponent {

         public fetchedRecords: any;


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

如何将 child 组件的 HTML/CSS 从 Angular 2+ 中的 parent 更改？

How do I change the HTML/CSS of a child component from parent in Angular 2+?

javascript

components

parent-child

angular-directive

angular