Angular可重用组件

Question

I want to create a widget which displays the list of schools in the state. It reads the list of schools from a json file and get refreshed every 5 minutes. This widget needs to be used outside the project as well. I mean I should be able to use this widget in other project with minimal effort. I am kinda new to angular. Can I create such a custom component with angular?

Template:

<main-component>
<app-school-list>  </app-school-list>
</main-component>

HomeController.cs-

public List<Schools> GetSchools(int stateId){
_homeService.GetSchools(stateId);
}

Answer 1

You need to create a library then you can deploy it to NPM and consume it in different projects. Another solution is using polymer, you create your web component and deploy it to NPM and it can be used by different technologies like Angular, JS, React etc. web components are more generic than a angular library.

https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5

https://blog.angulartraining.com/create-your-own-libraries-with-angular-cli-7b434600bbb7

Answer 2

To poll an api you use an RxJs interval

@Injectable({
  providedIn: 'root'
})
export class SchoolService {
  schools$ = interval(300000).pipe(switchMap(_ => this.http.get('api/schools')));

  constructor(private http: HttpClient) {}
}

and then in your component you can bind the schools to your template with the async pipe

schools$ = this.schoolService.schools$;

constructor(private schoolService: SchoolService) {}

and in your html

<ng-container *ngFor="school in schools$ | async">
  {{school.name}}
<ng-container>