angular - Angular 更新后，我不断收到 : Can't bind to 'xyz since it isn' t a known property of 'abc' 行的错误

Question

我们计划迁移到 Angular 8，但是当我执行 npm run build 错误时，例如:Can't bind to 'xyz since it isn't a known property of 'abc' 出现这个错误在以前的 Angular 版本中没有出现。这里有 2 个这样的例子:

ERROR in Can't bind to 'menu' since it isn't a known property of 'nb-user'.
<nb-user [ERROR ->][menu]="user_menu" [name]="userProfile.name" [picture]="userProfile.picture" [showInitials]="true" [s")


ERROR in Can't bind to 'thumb-label' since it isn't a known property of 'mat-slider'.
[ERROR ->][thumb-label]="thumbLabel"

组件

import { Component, OnInit } from '@angular/core'
import { NbMenuItem, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme'

import { MENU_ITEMS } from './sidebar.menu'
import { NbMenuInternalService } from '@nebular/theme/components/menu/menu.service'
import { LoginStatus } from '../../../globals/loginData'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: []
})
export class HomeComponent implements OnInit {
  menu = MENU_ITEMS;
  userProfile: any;
  constructor (private themeService: NbThemeService, private ls: LoginStatus, private sidebarService: NbSidebarService) { }

  user_menu: NbMenuItem[] = [
    {
      title: 'Logout',
      link: '/admin/logout'
    }
  ];

  ngOnInit () {
    try {
      this.userProfile = this.ls.orgDataLs.user_profile.google_profile
      console.log(this.userProfile.name)
    } catch (e) {
      console.log(e)
    }
  }

  toggleSidebar () {
    this.sidebarService.toggle(true, 'menu-sidebar')
    return false
  }
}

我该怎么办？有没有解决这类问题的通用方法

Answer 1

您应该添加 @Input 装饰器。这告诉 angular 这个特定的属性可以绑定(bind)到你的模板中。从@angular/core导入

仅添加相关部分。

import { Component, OnInit, Input } from '@angular/core'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers: []
})
export class HomeComponent implements OnInit {
  @Input()
  menu = MENU_ITEMS;
  @Input()
  userProfile: any;
  constructor (private themeService: NbThemeService, private ls: LoginStatus, private sidebarService: NbSidebarService) { }

  // ...
}