从父组件更新子组件

时间:2017-01-05 06:48:32

标签: angular

我想从父级更新我的ng-pagination组件。我有这个html"

<div class="search_div">
            <form (ngSubmit)="onSearch(searchval)" [formGroup]="searchval">
                <input type="text" placeholder="enter search string" formControlName="Search" class="form-control">
                <button type="submit" class="btn btn-primary">search</button>
            </form>
        </div>

        <ul class="search-res">
            <li *ngFor="let search of searchres.data">
                <a [routerLink]="search.Url" class="search-res-title" [innerHtml]="search.Title"></a>
                <p class="search-res-text" [innerHtml]="search.Content"></p>
            </li>
        </ul>

        <ng-pagination [totalResult]="searchres.totalResult" [(ngModel)]="searchres.currentPage" [length]="searchres.length" [offset]="searchres.offset" (pageChanged)="onSubmit(searchval)"></ng-pagination>

在我的组件中我有这个:

ngOnInit() {
    this.sharedData = this.sharedResource.sharedComponent;

    this.searchval = new FormGroup({
        Search: new FormControl(this.sharedData.searchStr)
    });

    this.busy = this.httpCall
        .get('/pub/home/search?val=' + this.sharedData.searchStr)
        .subscribe(
        data => {
            this.searchres = <Searchres>data;
        });
}


onSearch({ value }: {
    value: Searchres
}) {
    this.sharedData.searchStr = value.Search;
    this.busy = this.httpCall
        .post('/pub/home/search1',
        {
            val: this.sharedData.searchStr
        })
        .subscribe(
        data => {
            this.searchres = <Searchres>data;
            console.log(this.searchres);
        });
}

那会发生什么。在ngOnInit中,它搜索我的值并传递给ng-pagination并且它正常工作。但是当我使用onSearch进行搜索时,它会正确搜索值,记录所需的值,但分页组件不会更新。我使用了调试,它没有到那里。

我该怎么办?

显示如下: enter image description here

而不是这个: enter image description here

不知何故,总结果正在更新,我不知道为什么。

在分页组件中,我有以下内容:

export class PaginationComponent implements ControlValueAccessor, OnInit {
    @Input("totalResult") totalResult: number;
    @Input("currentPage") cPage: number;
    @Input("length") length: number;
    @Input("offset") offset: number;
    @Output("pageChanged") pageChanged = new EventEmitter();
    currentpage: number;
    pageList: Array<number> = [];
    private onChange: Function;
    private onTouched: Function;
    private lastPage: number;

    constructor(private pageChangedNgModel: NgModel, public ls: LanguageServiceService) {
        this.pageChangedNgModel.valueAccessor = this;

    }
    ngOnInit() {
        this.doPaging();
    }
    ****
}

0 个答案:

没有答案