Angular 如果选择器使用嵌套元素调用我的组件,我可以从nsAfterViewInit访问和操作这些嵌套元素吗?

Angular 如果选择器使用嵌套元素调用我的组件,我可以从nsAfterViewInit访问和操作这些嵌套元素吗?,angular,nativescript,Angular,Nativescript,我正在尝试创建自定义布局组件。理想情况下,该组件的工作方式与GridLayout类似,具有基于用户为嵌套元素提供附加标记的自定义功能。。但是,我没有找到嵌套元素 具体来说,, let childCount=this.getChildrenCount()在ngAfterViewInit中返回0 我在扩展GridLayout和不扩展GridLayout的情况下都试过了 如果没有编译错误,我无法删除模板规范 对于我在另一篇文章中试图解决的同一个问题,这是一种不同的方法 第一种方法尝试在布局组件中构

我正在尝试创建自定义布局组件。理想情况下,该组件的工作方式与GridLayout类似,具有基于用户为嵌套元素提供附加标记的自定义功能。。但是,我没有找到嵌套元素

具体来说,,
let childCount=this.getChildrenCount()在ngAfterViewInit中返回0

  • 我在扩展GridLayout和不扩展GridLayout的情况下都试过了
  • 如果没有编译错误,我无法删除模板规范
对于我在另一篇文章中试图解决的同一个问题,这是一种不同的方法

第一种方法尝试在布局组件中构建元素(类似于RadDataForm),这种方法允许调用者构建元素,然后尝试在布局组件中查找和管理它们

无论哪条道路上的任何帮助都将不胜感激

示例用户组件
从'@angular/core'导入{Component,OnInit,ViewChild,ElementRef};
@组成部分({
moduleId:module.id,
选择器:“ns应用程序”,
模板:`
`
})
导出类AppComponent实现OnInit{
名称:字符串;
类型:字符串;
构造函数(){}
恩戈尼尼特(){
console.log(“在ngOnInit中输入AppComponent”);
this.name='';
this.type='';
}
}
我的简单布局组件
从'@angular/core'导入{Component,OnInit,AfterViewInit,ViewChild,ElementRef};
从“tns核心模块/ui/layouts/grid layout”导入{GridLayout,GridUnitType,ItemSpec};
@组成部分({
moduleId:module.id,
选择器:“LayoutComponent”,
模板:“”
})
导出类LayoutComponent扩展GridLayout实现OnInit,AfterViewInit{
构造函数(){super()}
ngOnInit(){}
ngAfterViewInit(){
让childCount=this.getChildrenCount();
log(`In LayoutComponent ngAfterViewInit with Grid包含${childCount}kids`);
for(设i=0;i
我通过实验和挖掘几篇参考文献,包括约翰的参考文献,找到了一个可以接受的问题解决方案

我可以将元素嵌套在GridLayout中,在该GridLayout上设置一个id,然后将该id传递给我的自定义布局组件,而不是将元素嵌套在我自己的自定义布局组件中。我的布局组件可以使用id访问GridLayout,使用元数据属性获取元素,然后从中管理GridLayout和包含的元素。 我的完整样本发布在GitHub上

调用方模板
模板:`
`})
`
注意,nativescript并不抱怨TextField和ListPicker缺少典型属性,并且存在意外属性。LayoutComponent使用指定的属性来了解如何对每个属性元素进行源绑定、显示和验证。在渲染视图之前,它还会在ngOnInit中的每个元素上设置所需的属性。
这就把处理表单处理的大部分工作留给了LayoutComponent,我希望它在这里。我的示例在布局和类型支持方面做了一个基本的测试。它可以扩展以支持更多的元素类型,如筛选的选取列表、多选取器、滑块、复选框等。它还显示了适合的验证,但没有实现该服务。
最后,按id获取GridLayout、遍历嵌套元素、处理属性、将行和元素添加到网格中的细节在技术上并不复杂,但我相信这个示例可以更好地解释这种方法,而不是我在这里试图解释的方法。代码有合理的文档记录。

我通过实验和挖掘几篇参考文献,包括约翰的参考文献,找到了一个可以接受的问题解决方案

我可以将元素嵌套在GridLayout中,在该GridLayout上设置一个id,然后将该id传递给我的自定义布局组件,而不是将元素嵌套在我自己的自定义布局组件中。我的布局组件可以使用id访问GridLayout,使用元数据属性获取元素,然后从中管理GridLayout和包含的元素。 我的完整样本发布在GitHub上

调用方模板
模板:`
`})
`
注意,nativescript并不抱怨TextField和ListPicker缺少典型属性,并且存在意外属性。LayoutComponent使用指定的属性来了解如何对每个属性元素进行源绑定、显示和验证。在渲染视图之前,它还会在ngOnInit中的每个元素上设置所需的属性。
这就把处理表单处理的大部分工作留给了LayoutComponent,我希望它在这里。我的示例在布局和类型支持方面做了一个基本的测试。它可以扩展以支持更多的元素类型,如筛选的选取列表、多选取器、滑块、复选框等。它还显示了适合的验证,但没有实现该服务。
最后,按id获取GridLayout、遍历嵌套元素、处理属性、将行和元素添加到网格中的细节在技术上并不复杂,但我相信这个示例可以更好地解释这种方法,而不是我在这里试图解释的方法。代码有合理的文档记录。

重新格式化帖子谢谢您的反馈。我是盲人,完全不知道格式有问题。让我妻子看了这个尝试,所以希望它更好。看看其他的帖子。我还能做些什么来帮助你呢?Angular的网站有一个节动态组件加载器。改革
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'ns-app',
    template: `
    <StackLayout>
        <LayoutComponent columns="*, *" rows="auto" >
            <TextField [text]="name" hint="name" row="1" col="1"></TextField>
            <TextField [text]="type" hint="type" row="2" col="1"></TextField>
            <Button text="Add" row="4" col="2"></Button>
        </LayoutComponent>
    </StackLayout>
`
})
export class AppComponent implements OnInit {
    name: string;
    type: string;

    constructor() {}
    ngOnInit() {
        console.log("in ngOnInit for AppComponent");
        this.name = '';
        this.type = '';
    }
}
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { GridLayout, GridUnitType, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout";

@Component({
    moduleId: module.id,
    selector: 'LayoutComponent',
    template: ''
})
export class LayoutComponent extends GridLayout implements OnInit, AfterViewInit {

    constructor() { super() }
    ngOnInit() {}
    ngAfterViewInit() {
let childCount = this.getChildrenCount();
        console.log(`In LayoutComponent ngAfterViewInit with Grid contains ${childCount} kids`);
        for(let i=0; i < childCount; i++ ) {
            let child = this.getChildAt(i);
            console.log(`child ${i} on row ${child.row} =${child}`);
        }
    }
}
template: `
  <StackLayout height="500">
    <GridLayout id="MyForm" columns="*, *" height="300" width="200">
      <TextField property="email" type="email" required="true"></TextField>
      <TextField property="password" type="password" required="true"></TextField>
      <ListPicker property="choice" [valList]="choices" height="40"></ListPicker>
    </GridLayout>
    <LayoutForm [source]="myObject" form="MyForm" submitLabel="SaveForm" [submitTap]="onSubmitTap()"></LayoutForm>
  </StackLayout>
`})
    `

Note that nativescript makes no complaint that the typical attributes are missing and unexpected ones are present for TextField and ListPicker.  The LayoutComponent uses the specified attributes to understand how to source bind, present and validate each property element.  It also sets needed attributes on each element within ngOnInit before the view is rendered.

This leaves most of the work of handling form processing to the LayoutComponent, where I wanted it to be.  My sample does a basic pass at layout and type support.  It could be expanded to support many more element types such as filtered pick lists, multi-pickers, sliders, checkbox, etc.  It also shows validation fitting in, but does not implement the service.  

Finally, the specifics of getting the GridLayout by id, walking through the nested elements, processing attributes, adding rows and elements to the grid are not technically complex, but I believe the example may better explain the approach vs. my attempting to explain here.  The code is reasonably documented.