Question

我正在尝试使用一个组件，其模板引用其中相同组件的另一个实例。

模型如下：

class Item {
  String name;
  Item(this.name);
}

class Box extends Item {
  Box(String name) : super(name);
  List<Item> contents = [];
}

根据以上所述，创建数据：

myBox = new Box('top box');
myBox.contents.add(new Item('level 2 - 1'));
myBox.contents.add(new Item('level 2 - 2'));
Box myBox2 = new Box('inner box');
myBox2.contents.add(new Item('level 3 - 1'));
myBox2.contents.add(new Item('level 3 - 2'));
myBox.contents.add(myBox2);

代表JSON，它看起来像这样：

{
  "name": "top box",
  "contents": [
    {"name": "level 2 - 1"},
    {"name": "level 2 - 2"},
    {"name": "inner box",
      "contents": [
        {"name": "level 3 - 1"},
        {"name": "level 3 - 2"}
      ]
    }
  ]
}

组件dart（box_component.dart）：

@Component(
    selector: 'box-component',
    templateUrl: 'box_component.html',
    directives: const[CORE_DIRECTIVES]
)
class BoxComponent implements OnInit {
    @Input()
    Box box;
    List contents =[];

ngOnInit() {
    contents = box.contents;
}
 isBox(Item itm) => (itm is Box);
}

组件模板（box_component.html）：

<div *ngIf="box != null" style="font-weight: bold">{{box.name}}</div>
<div *ngFor="let item of contents">
  {{item.name}}
  <div *ngIf="isBox(item)">
    This is a box
    <box-component [box]="item"></box-component>
  </div>
  <div *ngIf="!isBox(item)">
    This is an item
  </div>
</div>

请注意，box-component的另一个实例嵌套在顶级box-component中但是，渲染时，只渲染顶级框的内容，而不是嵌套在其中的框中包含的内容。

看起来像这样：

顶部框
2 - 1级这是一个项目
2 - 2级这是一个项目
内箱
这是一个盒子这是一个项目

有没有办法实现递归嵌套渲染？

Answer 1

模板使用的任何指令必须在指令列表中声明。如果它想要递归地使用它自己，这包括它自己。所以在你的情况下@Component注释应该是：

let contact = CNMutableContact()          
contact.givenName = givenName
contact.familyName = familyName
contact.imageData = UIImagePNGRepresentation(image)

let store = CNContactStore()
let saveRequest = CNSaveRequest()
saveRequest.add(contact, toContainerWithIdentifier: nil)

do {
    try store.execute(saveRequest)
} catch let error {
    print(error)
}

递归使用组件

1 个答案: