Angular2 router.navigate एप्लिकेशन

Question

मैं है निम्नलिखित मार्गों मेरे एप्लिकेशन में परिभाषित पुन: लोड ...

app.components.ts 
@RouteConfig([ 
    {path:'/employees/...', name:'Employees', component:EmployeeComponent}, 
    ... 

employee.component.ts 
@RouteConfig([ 
    {path:'/', name:'EmployeeList', component:EmployeeListComponent, useAsDefault: true}, 
    {path:'/:id', name:'EmployeeDetail', component:EmployeeDetailComponent} 
]) 

जब मैं EmployeeDetailComponent टेम्पलेट से मार्ग ...

<button class="btn btn-default" [routerLink]="['EmployeeList']">Close</button> 

करने के लिए एप्लिकेशन मार्गों अपेक्षित कर्मचारी सूची पृष्ठ।

हालांकि

, जब मैं router.navigate का उपयोग कर मार्ग ...

// template 
<button class="btn btn-default" (click)="save()">Save</button> 

// EmployeeDetailComponent 
saveEmployee() { 
    this._employeeServer.updateEmployee(this.employee); 
    this._router.navigate(['EmployeeList']); 
} 

एप्लिकेशन मार्गों कर्मचारी लिस्टिंग (अपेक्षित रूप से) और फिर, कुछ ही क्षणों बाद, अनुप्रयोग पुनः लोड पूरी तरह से (नहीं के रूप में की उम्मीद)।

कोई विचार क्यों router.navigate राउटरलिंक से भिन्न व्यवहार कर रहा है? मैं क्या खो रहा हूँ?

Answer 1

आप इस निर्देश इस्तेमाल कर सकते हैं:

@Directive({ 
    selector: `click-stop-propagation` 
    events: 'stopClick($event)' 
}) 
class ClickStopPropagation { 
    stopClick(event:Event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    } 
} 

और यह इस तरह से लागू होते हैं:

<button class="btn btn-default" 
    (click)="save($event)" click-stop-propagation>Save</button> 

:

<button class="btn btn-default" 
    (click)="save()" click-stop-propagation>Save</button> 

एक अन्य समाधान save विधि करने के लिए घटना पारित करने के लिए किया जाएगा और घटना प्रसार को रोकने के लिए इसका उपयोग करें:

save(event) { 
    this._employeeServer.updateEmployee(this.employee); 
    this._router.navigate(['EmployeeList']); 
    event.preventDefault(); 
    event.stopPropagation(); 
} 

Answer 2

जबकि घटना प्रचार को रद्द करने के साथ थिएरी का जवाब मेरे लिए काम करता था, मुझे एक और समाधान मिला;

आप सहित की तुलना में इस neater पाते हैं या नहीं, एक क्लिक घटना बहस के लिए निर्भर है (किसी भी अवधि के) एक टाइमआउट में नेविगेशन लपेटकर प्रयास करें

... 
setTimeout(() => { 
    this._router.navigate(['EmployeeList']); 
}, 0); 
... 

। मेरे लिए, मैं नेविगेशन में किसी भी एनीमेशन की प्रतीक्षा करने में देरी करना चाहता था, और इस तरह मुझे अन्यथा अनावश्यक क्लिक ईवेंट से बचाया।

Answer 3

<button><form> सबमिट करने का प्रयास कर रहा है। बटन पर क्लिक करते समय सबमिट करने से रोकने के लिए <button type="button"> जोड़ने का प्रयास करें।