Angular 将零部件注入角度为8的零部件中，参考角度材质作为示例

我正在为我的用于UI功能的角度项目使用角度材质

在示例中，angular将以下代码作为引用组件中组件的示例

import {Component} from '@angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';

/**
 * @title Bottom Sheet Overview
 */
@Component({
  selector: 'bottom-sheet-overview-example',     <----- there is component 1
  templateUrl: 'bottom-sheet-overview-example.html',
  styleUrls: ['bottom-sheet-overview-example.css'],
})
export class BottomSheetOverviewExample {
  constructor(private _bottomSheet: MatBottomSheet) {}

  openBottomSheet(): void {
    this._bottomSheet.open(BottomSheetOverviewExampleSheet);
  }
}

@Component({                                          <--- oh look component 2 
  selector: 'bottom-sheet-overview-example-sheet',
  templateUrl: 'bottom-sheet-overview-example-sheet.html',
})
export class BottomSheetOverviewExampleSheet {
  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }
}

将组件注入上述第一个容器中

import { Component, OnInit } from '@angular/core';
import {MatBottomSheetRef} from '@angular/material';

@Component({
  selector: 'app-videorequestbottomsheet',
  templateUrl: './videorequestbottomsheet.component.html',
  styleUrls: ['./videorequestbottomsheet.component.scss']
})
export class VideorequestbottomsheetComponent implements OnInit {

  constructor(private bottomsheetref: MatBottomSheetRef<VideorequestbottomsheetComponent>) { }

  ngOnInit() {
  }

}

从'@angular/core'导入{Component，OnInit}；
从“@angular/material”导入{MatBottomSheetRef}；
@组成部分({
选择器：“应用程序videorequestbottomsheet”，
templateUrl:'./videorequestbottomsheet.component.html'，
样式URL:['./videorequestbottomsheet.component.scss']
})
导出类VideorequestbottomsheetComponent实现OnInit{
构造函数（私有bottomsheetref:MatBottomSheetRef）{}
恩戈尼尼特（）{
}
}

现在一切似乎都很好，应该可以正常工作了，但我发现了一个错误：

ERROR in ../bottomsheetshell.component.ts(17,27): error TS2345: Argument of type 'VideorequestbottomsheetComponent' is not assignable to parameter of type 'TemplateRef<unknown>'.
      Type 'VideorequestbottomsheetComponent' is missing the following properties from type 'TemplateRef<unknown>': elementRef, createEmbeddedView

../bottomsheetshell.component.ts（17,27）中的

错误：错误TS2345:类型为“VideorequestbottomsheetComponent”的参数不能分配给类型为“TemplateRef”的参数。
类型“VideorequestbottomsheetComponent”缺少类型“TemplateRef”中的以下属性：elementRef，createEmbeddedView

所以这个东西需要一个模板引用，但这不是我给它的吗？我的意思是，我的代码与示例完全相同，只是一个组件保存在另一个文件中

---

第二个错误。它从MatBottom继承的模板中获取TemplateRef

您不必注入bottomsheet组件，因为它不是服务。您可以直接在

this.bottomsheet.open

函数中使用它，如下所示：

this.bottomsheet.open(VideorequestbottomsheetComponent);

并将其从构造函数中删除

this.bottomsheet.open(VideorequestbottomsheetComponent);