angular - 无法访问子组件
问题描述
我有 2 个组件。第一个app-aaa
有app-bbb
里面。
aaa-component.html:
<button (click)="clickMe(flight)" type="submit">click me</button>
<app-bbb [flight]="flight"></app-bbb>
aaa-component.ts:
export class AaaComponent implements OnInit {
@ViewChild(BbbComponent) change: BbbComponent;
constructor(){}
ngOnInit() {
flight: ModelFlights = {
name:''
value:''
}
}
clickMe(form) {
this.change.change();
}
}
bbb-component.ts:
export class BbbComponent implements OnInit {
@Input() flight: ModelFlights;
constructor(private cdRef: ChangeDetectorRef, private sanitizer: DomSanitizer, private renderer2: Renderer2,
@Inject(DOCUMENT) private _document) {}
ngOnInit(){}
change() {
console.log('change event ');
// ...
}
}
我想bbb-component
通过单击clickMe
按钮从组件访问该方法
当前收到错误消息:
错误类型错误:无法读取change
AaaComponent.push../src/app/core/aaa/aaa.component.ts.AaaComponent.clickMe 处未定义的属性
行:this.change.change();
我有这样的库:
{
"name": "weco-travel-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"scss": "node-sass --watch assets/scss -o assets/css"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.2.15",
"@angular/cdk": "^7.3.7",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.7",
"@angular/material-moment-adapter": "^8.0.2",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@angular/service-worker": "^8.0.0",
"animate": "^1.0.0",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"ng-connection-service": "^1.0.4",
"ng-recaptcha": "^4.3.0",
"ngx-owl-carousel": "2.0.5",
"node-sass": "^4.12.0",
"popper.js": "^1.15.0",
"resize-observer-polyfill": "^1.5.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2",
"webpack": "^4.32.1",
"webpack-dev-server": "^3.4.1"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.9.",
"main": "index.js",
"author": "",
"license": "ISC"
}
请帮忙
解决方案
您需要将您的 html 更改为:
...
<app-bbb #test [flight]="flight"></app-bbb>
...
和你的组件:
...
@ViewChild("test", {static: false}) change: BbbComponent;
...
我为您构建了一个示例:
https://stackblitz.com/edit/angular-zdmaft?file=src%2Fapp%2Fapp.component.ts
推荐阅读
- jquery - Jquery DataTable 插件没有效果
- reactjs - 反应js中的方法覆盖
- sql - 实现基于值范围的颜色查找 SQL 表
- vaadin - Vaadin-CDI 缺少 Bundle-ManifestVersion
- r - 如何通过在R中搜索特定字母和字母顺序来重命名变量并将其更改为另一个变量
- azure-devops - 使用 Fortify on Demand 进行身份验证时出错。错误:错误:无法验证第一个证书
- c# - 这个活动图是否很好地显示了我的方法是如何工作的?
- python - 对 CX_ORACLE 的 SQL INSERT 语句使用 Python dict
- vue.js - 如何在 Nuxt JS 中将 vuetify 更新到最新版本?
- python - 来自 2d numpy 数组的边界框