首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Angular 2+中自动加载组件后单击按钮

如何在Angular 2+中自动加载组件后单击按钮
EN

Stack Overflow用户
提问于 2018-12-14 22:25:00
回答 1查看 881关注 0票数 1

我目前正在尝试在一个组件加载到Angular之后启动一个搜索功能。目前该函数是通过按一下按钮来调用的,但我想自动执行此操作。

代码语言:javascript
复制
<button mat-raised-button class="mat-white-button green-button" (click)="onSearch()" style="width: 184px; top: -5px;">
                <i class="fa fa-search" style="margin-bottom: 2px;"></i>&nbsp; Find Shoppers
            </button>

我目前正在尝试使用生命周期钩子ngAfterContentInit()调用this.onSearch()函数,但是这不起作用。似乎函数调用是在组件加载时进行的,但是从未完成。

代码语言:javascript
复制
     @Component({
    templateUrl: 'search.screen.html',
})

export class SearchScreen implements OnInit {

    _dealerId: number;
    public searching: boolean;
    public form: FormGroup;
    public noResultsFound: boolean;
    public viewChecked = false;

    startDate: Date;
    endDate: Date;
    minDate: Date;
    maxDate: Date;

    private searchSubscription: Subscription;

    // for the mat-header table component
    displayedColumns = ['name', 'email', 'phone', 'stage', 'currentVehicle', 'topVehicle', 'mappedDate'];
    shopperCount: number;

    dataSource: MatTableDataSource<SearchResult> = new MatTableDataSource<ActiveShopperSearchResult>();

    private paginator: MatPaginator;
    private sort: MatSort;

    @ViewChild(MatSort) set matSort(ms: MatSort) {
        this.sort = ms;
        this.setDataSourceAttributes();
    }

    @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
        this.paginator = mp;
        this.setDataSourceAttributes();
    }

    constructor(
        private everestApiService: EverestApiService,
        private _router: Router,
        private dialog: MatDialog,
        private _route: ActivatedRoute,
        private perms: PermissionsService,
    ) {
        this.form = new FormGroup({
            name: new FormControl(null),
            phone: new FormControl(null),
            email: new FormControl(null),
        });
    }

    ngOnInit() {
        this._dealerId = +this._route.snapshot.params['dealerId'];

        let startDateOffset = (24 * 60 * 60 * 1000) * 30; // 30 days offset
        let startDate = new Date();
        startDate.setTime(startDate.getTime() - startDateOffset);
        this.startDate = new Date(startDate.toString());
        this.endDate = new Date();

        let minDateOffset = (24 * 60 * 60 * 1000) * 365;
        let minDate = new Date();
        minDate.setTime(minDate.getTime() - minDateOffset);
        // this.onSearch();

    }
    ngAfterContentInit() {
        if(this.viewChecked === false) {
        this.onSearch();
        console.log(this.viewChecked)
        this.viewChecked = true;
        console.log(this.viewChecked)


        }
    }

 onSearch() {
        console.log('searching');
        this.clearResults();
        let searchParams = '?startDate=' + this.startDate.toISOString().substr(0, 10)
            + '&endDate=' + this.endDate.toISOString().substr(0, 10);

        if (this.form.value.name) {
            searchParams += '&name=' + this.form.value.name;
        }

        if (this.form.value.email) {
            searchParams += '&email=' + this.form.value.email;
        }

        if (this.form.value.phone) {
            searchParams += '&phone=' + this.form.value.phone;
        }

        this.searchSubscription = this.everestApiService.searchActiveShoppers(this._dealerId, searchParams)
            .pipe(track(inProgress => this.searching = inProgress))
            .subscribe((data) => {
                this.dataSource = new MatTableDataSource<ActiveShopperSearchResult>();
                this.dataSource.data = data;
                this.shopperCount = data.length;
                if (data.length === 0) {
                    this.noResultsFound = true;
                }
            });
    }
EN

回答 1

Stack Overflow用户

发布于 2018-12-15 02:17:17

ngAfterContentInit中添加一些console.log语句,看看是否打印出来。将其添加到内部和外部,看看打印了什么。Angular在创建组件的子视图后调用AfterViewInit()和AfterViewChecked()钩子。

此外,您的组件应该实现implements AfterViewChecked

代码语言:javascript
复制
 export class SearchScreen implements OnInit, AfterViewChecked  { 

       ngAfterContentInit() {
        if(this.viewChecked === false) {
        this.onSearch();
        console.log(this.viewChecked)
        this.viewChecked = true;
        console.log(this.viewChecked)
       }
     }

   }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53781550

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档