Question

我有两个嵌套组件。

main组件在这里：

@Component({
  selector: 'main',
  template: `<h1>Hello {{cat}}!</h1>`
})
export class MainComponent implements OnInit {
  cat: string;

  ngOnInit() {

  }
}

主要组件的属性名称为cat。我想将其传递给子组件。

@Component({
  selector: 'sub',
  template: `<ng-content></ng-content>`
})
export class SubComponent implements OnInit {
  @Input() cat: string;

  ngOnInit() {
     console.log(this.cat) // This writes undefined in console.
  }
}

我在app.component.html中使用它的方式如下：

<main>
  <sub [cat]="cat"></sub>
</main>

但是cat组件中的main属性不会在sub组件中传递。

Working Code is here.

Answer 1

您不小心为main和sub组件使用了错误的模板，main组件应具有模板<ng-content></ng-content>，而sub组件应具有模板<h1>Hello {{cat}}!</h1>。

因为如果您的ng-content组件模板中没有main节点，则sub组件将永远不会被投影/初始化。

另外，如果您使用[cat]="cat"，它将在app.component上查找属性cat，因为您是在app.component组件的上下文中使用它的。

内容投影不会更改属性绑定的上下文。

Answer 2

您需要传递

之类的值

OpenSSL::X509::CertificateError: nested asn1 error

或者您需要在

之类的main.ts文件中分配cat变量

<sub [cat]="cat"></sub>

Answer 3

您也可以直接在组件中定义cat。

BiConsumer<String, Double> changeHandler = (item, newValue) -> {
        System.out.println("New value is " + newValue);
        // Your code
};

Function<String, Boolean> ignoreEdit = item -> item.equalsIgnoreCase("USA");

TableViewUtils.setEditNumberCellFactory(column, changeHandler, "New value:", 200.0, 800.0, ignoreEdit);

您的子组件是正确的，将输出cat：

@Component({
  selector: 'main',
  template: `<sub [cat]="cat"></sub>`
})
export class MainComponent implements OnInit {
  cat: string = 'cat';

  ngOnInit() {
     console.log(this.cat) // Will output 'cat'
  }
}

您的@Component({ selector: 'sub', template: `<h1>Hello {{cat}}!</h1>` }) export class SubComponent implements OnInit { @Input() cat: string; ngOnInit() { console.log(this.cat) // Will output 'cat' } }模板应仅包含app.component.html

main

如何将组件属性传递给子组件？

3 个答案: