Question

我正在尝试将搜索框的输入传递给子组件，但是有关绑定的错误

如果app-search是Angular组件并且输入了SearchText，请验证它是否属于此模块。
如果app-search是Web组件，则将CUSTOM_ELEMENTS_SCHEMA添加到该组件的@NgModule.schemas中以禁止显示此消息。
要允许任何属性，请在此组件的NO_ERRORS_SCHEMA中添加@NgModule.schemas。（“ ed”

app.component.html 

<mat-toolbar color="primary">
  <span>The Deccan Chronical</span> <span class="spacer"></span>
  <div>
      <input class="form-control" type="text" placeholder="Search" name="searchValued" aria-label="Search" [(ngModel)]= "SearchText">
      <button >Submit</button>
      <app-search [SearchText] = "SearchText"></app-search>
    <button mat-button [routerLink]="['/']">Home</button>
    <button mat-button [routerLink]="['/headlines']">Headlines</button>
    <button mat-button [routerLink]="['/sources']">Sources</button>
    <button mat-button [routerLink]="['/favorites']">Favorites</button>
  </div>

</mat-toolbar>

<div class="container"><router-outlet></router-outlet></div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import { MatToolbarModule } from '@angular/material/toolbar';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import {SearchComponent} from './search/search.component';


@NgModule({
  declarations: [AppComponent, HomeComponent,SearchComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    HttpClientModule,
    Ng2SearchPipeModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}


app.component.ts

import { Component,OnInit,Input } from '@angular/core';
import { NewsService } from './services/news.service';
import { query } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  mArticles:Array<any>;
  mSources:Array<any>;
  title = 'My App!';
 @Input() searchText: string;
  news;
  newsSubscription;

  length;
  pageSize = 8;
  page = 1;
  constructor(private newsapi:NewsService){
    console.log('app component constructor called');  
  }

search.component.ts

import { Component, OnInit,Input } from '@angular/core';
import { NewsService } from 'src/app/services/news.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  @Input() searchText : string;
  news;
  newsSubscription;

  length;
  pageSize = 8;
  page = 1;
  constructor(private newsapi:NewsService){
    console.log('app component constructor called');  
  }


  ngOnInit() {
    this.getData();
  }

  getData() {
    this.newsSubscription = this.newsapi
      .getData(
        `top-headlines?country=us&pageSize=${this.pageSize}&page=${this.page}`
      )
      .subscribe(data => {
        this.news = data;
        this.length = data['totalResults'];
      });
  }

  getSearchData(searchText) {
    this.newsapi
      .getData(`everything?q=${searchText.toLowerCase()}`)
      .subscribe(data => {
        this.news = data;
      });   
  }
}

请提供补救措施以解决此错误。

无法绑定到“ SearchText”，因为它不是“ app-search”的已知属性

0 个答案: