Question

我想创建一个小部件，显示该州的学校列表。它从json文件读取学校列表，并每5分钟刷新一次。该小部件也需要在项目外部使用。我的意思是我应该能够以最小的努力在其他项目中使用此小部件。我对棱角有点陌生。我可以用angular创建这样的自定义组件吗？

模板：

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

HomeController.cs-

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

Answer 1

您需要创建一个库，然后才能将其部署到NPM并在其他项目中使用它。另一个解决方案是使用聚合物，您可以创建Web组件并将其部署到NPM，并且可以由Angular，JS，React等不同技术使用。Web组件比angular库更通用。

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

要轮询api，请使用RxJs间隔

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

  constructor(private http: HttpClient) {}
}

然后在您的组件中，可以使用异步管道将学校绑定到模板上

schools$ = this.schoolService.schools$;

constructor(private schoolService: SchoolService) {}

和您的html

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

Angular可重用组件

2 个答案: