小编Jey*_*ani的帖子

我是Angular 4的新手,所以有人可以解释::ng-deepAngular 4中的使用方法和位置吗？

实际上我想从父组件覆盖子组件的一些CSS属性.IE11还支持吗？

我需要使用angular 4从父组件获取子组件DOM引用,但我无法访问子组件DOM,请指导我如何实现这一点.

parent.component.html

<child-component></child-component>

parent.component.ts

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('tableBody') tableBody: ElementRef;
  constructor(){
    console.log(this.tableBody);//undefined
  }
  ngAfterViewInit() {
       console.log(this.tableBody);//undefined
   }
}

child.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent { 
}

child.component.html

<div>
        <table border="1">
      <th>Name</th>
      <th>Age</th>
      <tbody #tableBody>
        <tr>
         <td>ABCD</td>
          <td>12</td>
        </tr>        
      </tbody>
        </table>
</div> 

下面的两个在scss中有什么区别，在snippet中给出一些示例。

:host::ng-deep .content-body {
...
}

和

.content-body :host::ng-deep {
...
}

你能告诉我，下面两种 scss 样式之间的区别吗？我对此没有明确的想法。

:host {
  display: inline-block;

  /deep/ {
    span {
      color: red;
    }
  }
}

:host {
  display: inline-block;

  ::ng-deep {
    span {
      color: red;
    }
  }
}

我使用了 angular material(" @angular/material": "7.1.0 ") mat-select box 然后我使用了表单控件而不是 ng 模型，现在的问题是我无法在加载组件时设置该值。我需要将列表中的第一个值设置为 mat-select 框，我试过了，但我不能这样做。

我在 stackblitz 创建了一个代码，这里是链接：https ://stackblitz.com/edit/angular-zt1a9f

请帮助我。

我使用了 angular material("@angular/material": "7.1.0") 自动完成组件，然后我使用了表单控件而不是 ng 模型，现在的问题是，当我无法获得自动完成更改事件时组件正在加载。我在 ngOnInint 方法上将值设置为自动完成组件，当时我想根据自动完成值更改调用一个方法。

我在 stackblitz 创建了一个代码，这里是链接：https ://stackblitz.com/edit/angular-xmnmpy

目前我正在使用 angular 2 日期选择器 ng2-date-picker。这里不知道怎么设置minDate、maxDate、dateFormat等选项。请帮我解决这个问题。

代码：

<dp-date-picker></dp-date-picker>

我得到了tslint waring select is deprecated: from 6.1.0. Use the pipeable 'select' operator instead.

我的选择器如下所示

private availableStudents$ = this.store.select(getAvailableStudents);

还有我的package.json

"rxjs": "^6.0.0" "tslint": "~5.9.1" "typescript": "^2.9.2" "@angular/cli": "~6.1.2

我有一个像下面这样的对象数组，

[
{      
  "myValues": []
},
{
 "myValues": [],
 "values": [
    {"a": "x", "b": "1"},
    {"a": "y", "b": "2"}
  ],
  "availableValues": [],      
  "selectedValues": []
}
]

此外，如果我迭代对象，对象中存在的“值”键，它会将其转换为如下所示，

[
{      
  "myValues": []
},
{
  "myValues": [],
  "values": [
    {"a": "x", "b": "1"},
    {"a": "y", "b": "2"}
  ],
  "availableValues": [
    {"a": "x", "b": "1"},
    {"a": "y", "b": "2"}
  ],      
  "selectedValues": ["x", "y"]
}
]

我尝试过 ramda 函数式编程，但没有结果，

let findValues = x => {
  if(R.has('values')(x)){
  let availableValues = R.prop('values')(x);
  let selectedValues = R.pluck('a')(availableValues); …