Angular 无法访问子组件

我有两个组件。第一个

app aaa

内有

app bbb

aaa-component.html：

        <button (click)="clickMe(flight)" type="submit">click me</button>           
        <app-bbb [flight]="flight"></app-bbb>

bbb-component.ts：

        export class AaaComponent implements OnInit {

            @ViewChild(BbbComponent) change: BbbComponent;

            constructor(){}

            ngOnInit() {
                flight: ModelFlights = {
                    name:''
                    value:''
                }
            }             

            clickMe(form) {           
                this.change.change();
            }
        }

     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 ');
            // ...    
          }
        }

---

我想通过单击

clickMe

按钮，从

bbb组件

组件访问该方法

当前正在接收错误消息：

错误类型错误：无法读取未定义的属性

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>
...

我为您构建了一个示例：

---

问题在于它无法识别this.change（在调用时未定义）。您可以通过检查组件名称来确保ViewChild配置正确吗？另外，请查看字符串选择器的回答

bbb组件

有这样一个构造函数

构造函数（private cdRef:ChangeDetectorRef，private sanitizer:DomSanitizer，private render2:render2，@Inject（DOCUMENT）private _document）{}

我不知道如何创建这样一个对象：

notifyObj=newbbbcomponent（）但我的组件看起来是这样的：
导出类ResultToFlightsComponent实现OnInit{@Input（）飞行：ModelFlights；构造函数（私有cdRef:ChangeDetectorRef，私有sanitizer:DomSanitizer，私有Render2:Render2，@Inject（DOCUMENT）私有(U文档)）{}Ngonit（）{}change{console.log（'change event'）；/…}
我仍然有一个错误：
无法读取SafeSubscriber上未定义的属性“changeUrl”。\u下一步
我更新示例：app.component2现在是您的结果flightsComponent。没问题。属性“changeUrl”在哪里？我需要更多代码来帮助您
导出类BbbComponent实现OnInit{@Input（）flight:ModelFlights；构造函数（私有cdRef:ChangeDetectorRef，私有sanitizer:DomSanitizer，私有Render2:Render2，@Inject（DOCUMENT）private{u DOCUMENT）{}ngOnInit（）{}change（）{console.log（'change event'）；/…}
错误：`无法读取SafeSubscriber上未定义的属性更改。\下一个代码与上一条消息相同，只是组件名称不同这是当前代码：
导出类BbbComponent实现OnInit{@Input（）flight:ModelFlights；构造函数（private-cdRef:ChangeDetectorRef，private-sanitizer:DomSanitizer，private-render2:render2，@Inject（DOCUMENT）private{u DOCUMENT）{ngOnInit（）{}change（）{console.log（'change event'）；/…}}
收到错误消息：`无法读取SafeSubscriber上未定义的属性'change'
...
            @ViewChild("test", {static: false}) change: BbbComponent;
...