如何正确地将 Children 转移到 Angular 指令-angularjs-IT问答社区-解决你的IT疑问

如何正确地将 Children 转移到 Angular 指令

Caleth 3月前

我试图将 children 中的所有 FormGroup 传递给我的指令。为什么它们没有被传输？我尝试使用 ViewChildren 和 ContentChildren，但结果未定义

我正在尝试将 children 中的所有 FormGroup 传递给我的指令。为什么它们没有被传输？

我尝试使用 ViewChildren 和 ContentChildren，但结果未定义

<div block="tab" [class.is-active]="toggleGroup.value === 'output'" fieldGroupValidation>
        <app-rubric-theme-date></app-rubric-theme-date>
        <app-authors></app-authors>
    </div>

@Directive({
    selector: '[fieldGroupValidation]'
})
export class FieldGroupValidationDirective implements OnInit, OnDestroy {
    @ViewChildren(FormGroup) controls: QueryList<FormGroup>;
    constructor(
        
    ) {}

    ngOnInit() {
        // console.log('contorls', this.controls);
        // console.log('controls names: ', this.controls);
    }

    ngAfterViewInit() {
        console.log('contorls', this.controls);
    }

模板中的组件里面有表单组

帖子版权声明 1、本帖标题：如何正确地将 Children 转移到 Angular 指令
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Caleth在本站《angularjs》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Turing85 3月前 0 只看Ta

引用 2楼
看，那里有一个问题，在你的@ViewChild中你指定你想要在其他组件中拥有所有表单，（我假设）
```
<div block="tab" [class.is-active]="toggleGroup.value === 'output'" 
fieldGroupValidation>
    <app-rubric-theme-date></app-rubric-theme-date>
    <app-authors></app-authors>
</div>
```
比如，在您的指令中，您期望在指令范围内收到一个 FormGroup 或所有其他 FormGroup，但事实并非如此。

FormGroup 不是您可以在 ViewChild/ViewChildren/ContenChildren/ContentChild 中引用的类，因为它是 Angular 使用的实用类，您只能引用 DOM 元素。https https://angular.dev/api/forms/FormGroup

您需要指定您想从组件中获得的东西，如下所示：
```
<div block="tab" [class.is-active]="toggleGroup.value === 'output'" 
fieldGroupValidation>
    <app-rubric-theme-date></app-rubric-theme-date>
    <app-authors #authors></app-authors>
</div>
```
现在你的打字稿可能像这样：
```
@Directive({
selector: '[fieldGroupValidation]'
})
export class FieldGroupValidationDirective implements 
   OnInit, 
   OnDestroy, 
   AfterViewInit //Do not forget to implement the interface
{
@ViewChild("authors") authorsComponent!: YourAuthorComponentClass;
//You could also do this:
@ViewChild(RubicThemeComponent) myRubicThemeComponent!: RubicThemeComponent;
constructor(
    
) {}

ngOnInit() {
    // console.log('contorls', this.controls);
    // console.log('controls names: ', this.controls);
}

ngAfterViewInit() {
    console.log(this.authorsComponent);
}
```
现在，您可以访问作者组件中的所有其他属性，然后可以像这样指定控件：
```
this.authorsComponent.myFormsControls
```
现在您可以使用表单进行其他操作了。
evanb 3月前 0 只看Ta

引用 3楼

cordova-plugin-barcodescanner 在 Android 上扫描后崩溃。相机启动。能够从条形码捕获文本并打印到日志中。然后应用程序崩溃并转到登录页面。barcodescanner 工作正常

cordova-plugin-barcodescanner 在 Android 上扫描后崩溃。

相机启动。能够从条形码捕获文本并打印到日志中。然后应用程序崩溃并进入登录页面。

barcodescanner 在 iOS 上按预期运行。

任何帮助将非常感激。

[email protected] Cordova 7SDK 33AngularJS

@red-mobile/ [电子邮件保护]

日志很广泛，但没有什么突出的。

<uses-permission android:name="com.google.zxing.client.android.SCAN"/> <uses-permission android:name="android.permission.CAMERA" />

<label class="item item-input item-range" ng-click="cameraView.scanQRCode()"> <div layout="row" layout-align="center center" class="item-container qr-code-container"> <i class="icon ion-ios-qr-scanner-outline qr-code-icon"></i> </div> </label>

cordova.plugins.barcodeScanner.scan

尝试了每种类型的 cordova 条形码扫描器，它们都可以在编译时表现出相同的行为。

期望应用程序返回启动时的视图并且不会崩溃。它确实返回了一瞬间，但随后就崩溃了。
Rohit Singh 3月前 0 只看Ta

引用 4楼

请仔细查看日志以查找异常并将其添加到您的帖子中。否则，如果不知道哪里出了问题，将很难提供帮助。另外，添加一些代码也会很有用。也许您的实现导致了这个问题，类似于这个帖子：
David Schwartz 3月前 0 只看Ta

引用 5楼

仅供参考 - 问题是，在 Android 上，当相机关闭时，它会发出 \'resume\' 事件，从而触发以下内容。删除后一切正常。document.addEventListener(\'resume\', function(){ viewService.nextDirection = 'back'; $state.go('login'); }, false);
Kjartan 3月前 0 只看Ta

引用 6楼

我想让我的 Angular 应用可扩展。我使用 nx 和 nx 工作区。在工作区中，我将库中每个客户的基本实现（核心）和基本实现代码外包给...

我想让我的 Angular 应用可扩展。我使用 nx 和 nx 工作区。在工作区中，我将库中每个客户的基本实现（核心）和基本实现代码外包。

我创建了两个 Git 存储库，一个用于基本实现（我们的核心代码），一个用于客户的基本实现。

如果客户想要使用该应用程序，我只需根据客户的基本实现代码创建一个新的客户仓库，这样我就可以根据客户的意愿调整代码，而无需改变我们的基本实现（核心）。

此外，如果我更改我们基本实现（核心）中的代码，我不想覆盖客户的实现（客户回购）。

因此必须有两个存储库。一个用于客户，一个用于我们的核心实现（两者是分开的）。我遇到的问题是，客户的实现必须在核心实现中，否则无法找到客户存储库的组件和模块。

我的问题是：如何实现这个想法，而不将客户的 repo 移到核心 repo 中？