1. ev
  2. Soru-cevap
  3. Niçin bir bağlayıcı bir öznitelik yönergesi kullanmak o kadar çok kez bu bağlamaya atanmış bir işlevi çağırıyor gibi görünüyor?

Niçin bir bağlayıcı bir öznitelik yönergesi kullanmak o kadar çok kez bu bağlamaya atanmış bir işlevi çağırıyor gibi görünüyor?

2016-04-14 11 views
1

Bir modal hale aşağıdaki butonu var:Niçin bir bağlayıcı bir öznitelik yönergesi kullanmak o kadar çok kez bu bağlamaya atanmış bir işlevi çağırıyor gibi görünüyor?

<button class="ui blue compact tiny labeled icon button" [test-case-view-modal]="getSelectedTestCase()" 
(save)="updateTestCaseExecuteStatus($event)" (close)="onCloseTestCaseModal()" (click)="isShowOverlay = true" 
[is-execute-test-run]="true" [disabled]="selectedTestCases.length == 0"> 
<i class="icon dropdown"></i> 
    Run 
</button>

bileşen şöyle kullanılır:

<work-item-modal-testcase [model]="model" [hidden]="subMenu != 'testcase'"></work-item-modal-testcase>

gerçek bileşen: Temelde

@Component({ 
    selector: 'work-item-modal-testcase', 
    directives: [TestCaseViewModalDirective], 
    template: ` 

    <style> 
     .passed { background-color: #c2e6c2; color: #ffffff; } 
     .failed { background-color: #c80f00; color: #ffffff; } 
     .in-completed { background-color: #969696; color: #ffffff; } 
     .blocked { background-color: #ffd800; color: #ffffff; } 

    </style> 

    <div class="ui right aligned fluid container"> 
     <button class="ui blue compact tiny labeled icon button" [test-case-view-modal]="getSelectedTestCase()" 
     (save)="updateTestCaseExecuteStatus($event)" (close)="onCloseTestCaseModal()" (click)="isShowOverlay = true" 
     [is-execute-test-run]="true" [disabled]="selectedTestCases.length == 0"> 
     <i class="icon dropdown"></i> 
     Run 
     </button> 
     <button class="ui blue compact tiny labeled icon button" [test-case-view-modal]="sampleTestCase" 
     (save)="createTestCase($event)" (close)="onCloseTestCaseModal()" (click)="isShowOverlay = true"> 
     <i class="icon plus"></i> 
     Test Case 
     </button> 
     <button class="ui blue compact tiny right labeled icon button"> 
     <i class="icon dropdown"></i> 
     Actions 
     </button> 
    </div> 
    <div class="ui divider"></div> 
    <div class="ui fluid container"> 
     <table class="ui very compact small selectable celled table"> 
     <thead> 
      <tr> 

      <th> 
       <div class="fitted massive checkbox"> 
       <input type="checkbox"> 
       </div> 
      </th> 
      <th>Test Case</th> 
      <th>Status</th> 
      <th>Execute status</th> 
      <th>Configuration</th> 
      <th>Hrs</th> 
      <th>Component</th> 
      <th>Assigned</th> 
      <th>Start</th> 
      <th>End</th> 
      <th class="center aligned"><i class="blue edit icon"></i></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="#tc of model.testCases"> 
      <td> 
       <div class="huge checkbox"><input type="checkbox" (change)="toggleTestCaseSelected($event, tc.id)"></div> 
      </td> 
      <td>{{ tc.name }}</td> 
      <td>{{ tc.status.name }}</td> 
      <td [class.passed]="tc.executeStatus === 'Passed'" 
       [class.failed]="tc.executeStatus === 'Failed'" 
       [class.in-completed]="tc.executeStatus === 'In Completed'" 
       [class.blocked]="tc.executeStatus === 'Blocked'"> 
       <span *ngIf="tc.executeStatus"> {{ tc.executeStatus }} </span> 
      </td> 
      <td></td> 
      <td>{{ tc.effort }}</td> 
      <td> <span *ngFor="#cmp of tc.components"> {{ cmp.name }} </span></td> 
      <td> <span *ngFor="#assigner of tc.assigned"> {{ assigner.name }} </span></td> 
      <td>{{ tc.start }}</td> 
      <td>{{ tc.end }}</td> 
      <td class="center aligned"> 
       <i class="blue edit link icon" [test-case-view-modal]="tc" 
       (save)="testCaseService.update($event)" (close)="onCloseTestCaseModal()" (click)="isShowOverlay = true"></i> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    <div class="ui dimmer page" [class.active]="isShowOverlay"></div> 
    ` 
}) 
class WorkItemModelTestcaseComponent { 
    @Input() model: WorkItem; 
    // FIXME: workaround for Semantic UI multiple modal: show overlay for disabled lower layer modal. 
    private isShowOverlay: boolean; 
    private sampleTestCase: SampleTestCase; 
    private selectedTestCases: string[] = []; 

    constructor(private testCaseService: TestCaseService) { 
    this.onCloseTestCaseModal(); 
    } 

    createTestCase(testCase: TestCase) { 
    this.model.testCases.push(this.testCaseService.create(testCase)); 
    } 

    onCloseTestCaseModal() { 
    this.isShowOverlay = false; 
    this.sampleTestCase = new SampleTestCase(); 
    } 

    // TODO: sample code for getting first selected TestCase, or first testCase if Nothing is selected 
    getSelectedTestCase(): TestCase { 
    console.log("getSelectedTestCase => model => ", this.model); 
    let firstSelectedId = this.selectedTestCases[0]; 
    return firstSelectedId 
     ? _.head(_.filter(this.model.testCases, (x) => { return x.id === firstSelectedId; })) 
     : this.model.testCases.length > 0 ? this.model.testCases[0] : null; 
    } 
    toggleTestCaseSelected(event, testCaseId: string) { 
    //console.log("toggleTestCaseSelected", testCaseId, event.target.checked, !event.target.checked, event); 
    let indexTc = this.selectedTestCases.indexOf(testCaseId); 
    if (-1 === indexTc) { 
     if (event.target.checked) { 
     this.selectedTestCases.push(testCaseId); 
     }; 
    } else { 
     if (!event.target.checked) { 
     this.selectedTestCases.splice(indexTc, 1); 
     }; 
    }; 
    console.log("this.selectedTestCases", this.selectedTestCases); 
    } 

    //------------------------------------------------- 
    updateTestCaseExecuteStatus(data: TestCase) { 
    console.log("updateTestCaseExecuteStatus"); 
    this.getSelectedTestCase().executeStatus = data.executeStatus; 
    } 
}

, bu düğmeyi kullanın Tıklatıldığında ekranda bir yeni modal açmak için.

getSelectedTestCase(): TestCase { 
    console.log("getSelectedTestCase => model => ", this.model); 
    let firstSelectedId = this.selectedTestCases[0]; 
    return firstSelectedId 
     ? _.head(_.filter(this.model.testCases, (x) => { return x.id === firstSelectedId; })) 
     : this.model.testCases.length > 0 ? this.model.testCases[0] : null; 
    }
: 
@Directive({ 
    selector: '[test-case-view-modal]', 
    inputs: [ 
    'testCase' 
    ], 
    providers: [ 
    TestCaseService 
    ], 
    host: { 
    '(click)': 'onClick()' 
    } 
}) 
export class TestCaseViewModalDirective { 
    @Input('test-case-view-modal') testCase: TestCase; 
    @Output() save: EventEmitter<TestCase> = new EventEmitter<TestCase>(); 
    @Output() close: EventEmitter<any> = new EventEmitter<any>(); 
    @Output() start: EventEmitter<any> = new EventEmitter<any>(); 
    @Input('is-execute-test-run') isExecuteTestRun: boolean; 

    constructor(private loader: DynamicComponentLoader, private appRef: ApplicationRef, 
     private _testCaseService: TestCaseService) { 
     console.log('TestCaseViewModalDirective ::() '); 
     } 

    onClick() { 
    if (this.start) { 
     this.start.next(true); 
    }; 
    let appEleRef = this.appRef['_rootComponents'][0].location; 
    let bindings = Injector.resolve([ 
     provide(TestCase, { 
      useValue: this.testCase 
     }) 
    ]); 
    return this.loader.loadNextToLocation(TestCaseViewComponent, appEleRef, bindings).then(testCaseViewModalRef => { 
     let testCaseModelComponent = <TestCaseViewComponent>testCaseViewModalRef.instance; 
     testCaseModelComponent.isExecuteTestRun = this.isExecuteTestRun; 
     testCaseModelComponent.closeEvent.subscribe(_ => { 
     testCaseViewModalRef.dispose(); 
     this.close.emit(_); 
     }); 
     testCaseModelComponent.saveEvent.subscribe(_ => { 
     this.save.emit(_); 
     }); 
     return testCaseViewModalRef; 
    }); 
    } 
}

yönergesi için bağlayıcı özellik bu işlevi çağırır

Şeye (tıklayın) dinler ve tıklama konumuna gelecek yeni modal yükleyen bir yönerge oluşturduk 

=> triggered change detection 
work-items.ts:34 WorkItemModalDirective :: open() 
work-items.ts:34 new work item => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 TestCaseViewModalDirective ::() 
work-items.ts:34 TestCaseViewModalDirective ::() 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…} 
work-items.ts:34 getSelectedTestCase => model => WorkItem {id: "0e2f734e-1d08-481a-b12a-ebf75a07be0d", issueLink: "XX1211", summary: "Newly added work item", description: undefined, project: Object…}
: Ben ilk modal yük

, ben işlevi içinde günlük mesajdan bkz çıkış fonksiyonu birkaç kez çağrılan gösterir

Anlayamadığım bir soru, ilk modal düğmesinden (bileşeni göstererek) bu işlevin neden bu kadar çok çağrıldığını soruyor? Ana bileşene yalnızca bir değişiklik olduğunu gösteren ngOnChange eklemek için günlük ekledim (ilk model) ve yönerge yalnızca bir kez yüklenir.

kaynak

2016-04-14 denodaeus

cevap

0

Köşeli, şablon ifadelerini düşündüğümüzden daha sık yürütür. Her tuşa basma veya fare hareketinden sonra çağrılabilirler. İfadeler hızlıca bitirmeli veya kullanıcı deneyimi özellikle daha yavaş cihazlarda sürüklenebilir. Hesaplama pahalı olduğunda, diğer değerlerden hesaplanan değerleri önbelleğe almayı düşünün. görünümünde bağlı @kemsky işlevleri (ve özelliklere ve alıcılar) ile mentiond olarak

link

kaynak

2016-04-14 21:15:02 kemsky

0

değişimi saptama durumda her zaman değerlendirilir.

Köşeli takım, işlevlere bağlanmayı zorlaştırır. Bunun yerine sonucu bir mülkte saklayın ve o mülke bağlayın.

Ayrıca, ilişkili işlevlerle ilgili yaygın bir hata da vardır. sizin işlevi kontrol edildi sonra

İfade değişti atacağım Eğik

someFunc() { 
    return ['a']; 
}

benziyorsa.

devMode yılında Açısal her normal değişim algılama döngüsünden sonra bir ek değişiklik algılama döngüsünü çalıştırır ve model bu değişimin tespiti kendisi Başvurunuz esrarlı davranırlar yapacak değiştirmeye modeli neden gösterir çünkü aradaki değiştirmek değil beklediği için üretimde.

bir özelliğe değer depolamaya alternatif yolu bileşeni

changeDetection: ChangeDetectionStrategy.OnPush

için farklı bir değişim saptama stratejisi ayarlamak ve sonra bileşeni üzerinde değişiklik algılama ne zaman çalıştırılacağını Açısal anlatmaktır.
Daha fazla ayrıntı için bkz. http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

kaynak

2016-04-15 05:47:03

 İlgili konular

  • İlgili sorun yok^_^