Question

我有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组件访问该方法

当前收到错误消息：

错误TypeError：无法读取未定义的属性change 在AaaComponent.push ../ src / app / core / aaa / aaa.component.ts.AaaComponent.clickMe

line：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"
    }

请帮助

Answer 1

您需要将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

无法访问子组件

1 个答案: