คำถามติดแท็ก angular

ใครช่วยบอกฉันได้ว่าจะใช้jQueryกับAngular ได้อย่างไร class MyComponent { constructor() { // how to query the DOM element from here? } } ฉันรู้ว่ามีวิธีแก้ปัญหาเช่นการจัดการชั้นเรียนหรือรหัสขององค์ประกอบ DOM ล่วงหน้า แต่ฉันหวังว่าวิธีที่สะอาดกว่าในการทำมัน

343 jquery  angular 

ฉันมีปัญหากับ HTTP ในเชิงมุม ผมแค่อยากจะรายการและแสดงในมุมมองGETJSON ระดับบริการ import {Injectable} from "angular2/core"; import {Hall} from "./hall"; import {Http} from "angular2/http"; @Injectable() export class HallService { public http:Http; public static PATH:string = 'app/backend/' constructor(http:Http) { this.http=http; } getHalls() { return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json()); } } และในHallListComponentฉันโทรgetHallsวิธีจากบริการ: export class HallListComponent implements OnInit { …

334 angular  rxjs 

ฉันต้องตั้งค่าส่วนหัวการอนุญาตบางส่วนหลังจากผู้ใช้ลงชื่อเข้าใช้สำหรับทุกคำขอที่ตามมา หากต้องการตั้งค่าส่วนหัวสำหรับคำขอเฉพาะ import {Headers} from 'angular2/http'; var headers = new Headers(); headers.append(headerName, value); // HTTP POST using these headers this.http.post(url, data, { headers: headers }) // do something with the response การอ้างอิง แต่จะเป็นไปไม่ได้ที่จะตั้งค่าส่วนหัวคำขอด้วยตนเองสำหรับทุกคำขอด้วยวิธีนี้ ฉันจะตั้งค่าส่วนหัวได้อย่างไรเมื่อผู้ใช้ลงชื่อเข้าใช้แล้วลบส่วนหัวเหล่านั้นออกจากระบบด้วย

334 angular 

ฉันได้รับEXCEPTION: No provider for Http!แอพเชิงมุมของฉัน ผมทำอะไรผิดหรือเปล่า? import {Http, Headers} from 'angular2/http'; import {Injectable} from 'angular2/core' @Component({ selector: 'greetings-ac-app2', providers: [], templateUrl: 'app/greetings-ac2.html', directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES], pipes: [] }) export class GreetingsAcApp2 { private str:any; constructor(http: Http) { this.str = {str:'test'}; http.post('http://localhost:18937/account/registeruiduser/', JSON.stringify(this.str), { headers: new Headers({ 'Content-Type': 'application/json' …

333 angular 

ใน AngularJS ฉันสามารถใช้ตัวกรอง (ไปป์) ภายในบริการและตัวควบคุมโดยใช้ไวยากรณ์ที่คล้ายกับสิ่งนี้: $filter('date')(myDate, 'yyyy-MM-dd'); เป็นไปได้ไหมที่จะใช้ท่อในบริการ / ส่วนประกอบเช่นนี้ในแองกูลาร์

331 angular 

ฉันใหม่กับ Angular และฉันมาจากชุมชน Ember กำลังพยายามใช้ Angular-CLI ใหม่ซึ่งอ้างอิงจาก Ember-CLI ฉันจำเป็นต้องรู้วิธีที่ดีที่สุดในการจัดการ SASS ในโครงการ Angular ใหม่ ฉันลองใช้ember-cli-sassrepo เพื่อดูว่ามันจะเล่นได้หรือไม่เนื่องจากส่วนประกอบหลักจำนวนมากของ Angular-CLI นั้นไม่ทำงานในโมดูล Ember-CLI มันใช้งานไม่ได้ แต่ก็ไม่แน่ใจอีกต่อไปหากฉันเพิ่งกำหนดค่าบางอย่างผิดพลาด นอกจากนี้วิธีที่ดีที่สุดในการจัดระเบียบสไตล์ในโครงการแองกูลาร์ใหม่คืออะไร มันจะดีถ้ามีไฟล์ sass ในโฟลเดอร์เดียวกับคอมโพเนนต์

329 angular  sass  angular-cli 

ฉันมีปัญหาในการโหลดคลาสลงในคอมโพเนนต์ Angular ฉันพยายามแก้ไขมันมาเป็นเวลานาน ฉันได้ลองรวมทั้งหมดในไฟล์เดียว สิ่งที่ฉันมีคือ: Application.ts /// <reference path="../typings/angular2/angular2.d.ts" /> import {Component,View,bootstrap,NgFor} from "angular2/angular2"; import {NameService} from "./services/NameService"; @Component({ selector:'my-app', injectables: [NameService] }) @View({ template:'<h1>Hi {{name}}</h1>' + '<p>Friends</p>' + '<ul>' + ' <li *ng-for="#name of names">{{name}}</li>' + '</ul>', directives:[NgFor] }) class MyAppComponent { name:string; names:Array<string>; constructor(nameService:NameService) { this.name = 'Michal'; …

326 typescript  angular  systemjs 

Angular 1 ไม่ยอมรับonchange()กิจกรรม แต่ยอมรับเฉพาะng-change()กิจกรรม ในทางกลับกัน 2 ยอมรับทั้งสอง(change)และ(ngModelChange)เหตุการณ์ซึ่งทั้งสองดูเหมือนจะทำสิ่งเดียวกัน ความแตกต่างคืออะไร? อันไหนดีที่สุดสำหรับประสิทธิภาพ? ngModelChange : <input type="text" pInputText class="ui-widget ui-text" (ngModelChange)="clearFilter()" placeholder="Find"/> เทียบกับการเปลี่ยนแปลง : <input type="text" pInputText class="ui-widget ui-text" (change)="clearFilter()" placeholder="Find"/>

326 javascript  html  angular  typescript  angular-ngmodelchange 

เมื่อฉันพยายามสร้างส่วนประกอบในมุมเชิงมุมมันแสดงให้ฉันเห็นข้อผิดพลาดนี้ ฉันจะกำจัดมันได้อย่างไร ข้อผิดพลาด: มีมากกว่าหนึ่งโมดูลที่ตรงกัน ใช้ตัวเลือก skip-import เพื่อข้ามการนำเข้าส่วนประกอบไปยังโมดูลที่ใกล้เคียงที่สุด ฉันใช้เวอร์ชันเชิงมุม cli: 1.4.1

316 angular 

หมายเหตุ: มีคำตอบต่าง ๆ มากมายที่นี่และส่วนใหญ่ใช้ได้ในครั้งเดียวหรืออย่างอื่น ความจริงก็คือสิ่งที่ได้ผลมีการเปลี่ยนแปลงหลายครั้งเนื่องจากทีม Angular ได้เปลี่ยนเราเตอร์ เราเตอร์เวอร์ชัน 3.0 ที่ในที่สุดจะเป็นเราเตอร์ใน Angular จะแบ่งการแก้ปัญหาเหล่านี้ออกเป็นจำนวนมาก แต่นำเสนอโซลูชันที่เรียบง่ายของตัวเอง ตั้งแต่ RC.3 โซลูชันที่ต้องการคือใช้[routerLinkActive]ดังที่แสดงในคำตอบนี้ ในแอปพลิเคชันเชิงมุม (ปัจจุบันในรุ่น 2.0.0-beta.0 ขณะที่ฉันเขียน) คุณจะทราบได้อย่างไรว่าเส้นทางที่ใช้งานอยู่ในปัจจุบันคืออะไร? ฉันกำลังทำงานกับแอพที่ใช้ Bootstrap 4 และฉันต้องการวิธีทำเครื่องหมายลิงก์ / ปุ่มการนำทางเป็นแอคทีฟเมื่อองค์ประกอบที่เกี่ยวข้องแสดงใน<router-output>แท็ก ฉันรู้ว่าฉันสามารถรักษาสถานะของตัวเองได้เมื่อมีการคลิกปุ่มใดปุ่มหนึ่ง แต่นั่นไม่ครอบคลุมถึงกรณีที่มีหลายเส้นทางในเส้นทางเดียวกัน (พูดเมนูนำทางหลักเช่นเดียวกับเมนูท้องถิ่นในองค์ประกอบหลัก ) คำแนะนำหรือลิงค์ใด ๆ จะได้รับการชื่นชม ขอบคุณ

312 javascript  typescript  angular  angular2-routing 

โปรดอธิบายกับฉันว่าทำไมฉันถึงได้รับข้อผิดพลาดนี้: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. เห็นได้ชัดว่าฉันได้รับมันในโหมด dev เท่านั้นมันไม่ได้เกิดขึ้นในงานสร้างของฉัน แต่มันก็น่ารำคาญมากและฉันก็ไม่เข้าใจถึงประโยชน์ของการมีข้อผิดพลาดในสภาพแวดล้อม dev ของฉันที่จะไม่ปรากฏขึ้นบนผลิตภัณฑ์ - อาจเป็นเพราะฉันขาดความเข้าใจ โดยปกติการแก้ไขนั้นง่ายพอฉันเพิ่งตัดข้อผิดพลาดที่ทำให้เกิดรหัสใน setTimeout ดังนี้: setTimeout(()=> { this.isLoading = true; }, 0); หรือบังคับให้ตรวจจับการเปลี่ยนแปลงด้วยตัวสร้างเช่นนี้constructor(private cd: ChangeDetectorRef) {}: this.isLoading = true; this.cd.detectChanges(); แต่ทำไมฉันจึงพบข้อผิดพลาดนี้อยู่ตลอดเวลา ฉันต้องการที่จะเข้าใจเพื่อที่จะได้หลีกเลี่ยงการแก้ไขแฮ็กเหล่านี้ในอนาคต

308 angular  angular2-changedetection  angular2-databinding 

โดยการใช้ Http เราจะเรียกวิธีที่ใช้ในการโทรผ่านเครือข่ายและส่งกลับ http ที่สังเกตได้: getCustomer() { return this.http.get('/someUrl').map(res => res.json()); } หากเราใช้สิ่งนี้สามารถสังเกตได้และเพิ่มสมาชิกหลายคน: let network$ = getCustomer(); let subscriber1 = network$.subscribe(...); let subscriber2 = network$.subscribe(...); สิ่งที่เราต้องการจะทำคือมั่นใจได้ว่านี่จะไม่ทำให้เกิดคำขอเครือข่ายหลาย สิ่งนี้อาจดูเหมือนเป็นสถานการณ์ที่ผิดปกติ แต่จริง ๆ แล้วเป็นเรื่องธรรมดา: ตัวอย่างเช่นหากผู้โทรสมัครรับข้อมูลที่สังเกตได้เพื่อแสดงข้อความแสดงข้อผิดพลาดและส่งผ่านไปยังเทมเพลตโดยใช้ async pipe เรามีสมาชิกสองคนแล้ว วิธีที่ถูกต้องในการทำเช่นนั้นใน RxJs 5 คืออะไร? คือนี่ดูเหมือนจะทำงานได้ดี: getCustomer() { return this.http.get('/someUrl').map(res => res.json()).share(); } แต่นี่เป็นวิธีที่ใช้ในการทำสิ่งนี้ใน RxJs 5 หรือว่าเราควรทำอย่างอื่นแทน? …

303 angular  rxjs  angular2-services  rxjs5 

ฉันจะบอกได้ว่าฉันใช้ Angular รุ่นใด ฉันเหนื่อย: angular --version angular --v angular -version angular -v แต่ได้รับ -bash: angular: command not found ฉันรู้โดยyeoman --versionที่ฉันกำลังใช้0.9.6 แต่จะรับรุ่นเชิงมุมได้อย่างไร

301 angularjs  angular 

ฉันใช้เทมเพลต Angular 4 กับ webpack และฉันมีข้อผิดพลาดนี้เมื่อฉันพยายามใช้ส่วนประกอบ (ConfirmComponent): ไม่พบโรงงานส่วนประกอบสำหรับ ConfirmComponent คุณเพิ่มลงใน @ NgModule.entryComponents หรือไม่ ส่วนประกอบถูกประกาศใน app.module.server.ts @NgModule({ bootstrap: [ AppComponent ], imports: [ // ... ], entryComponents: [ ConfirmComponent, ], }) export class AppModule { } ฉันยัง app.module.browser.tsและapp.module.shared.ts ฉันจะแก้ไขได้อย่างไร

300 angular  angular-webpack-starter 

ฉันใช้ Angular 4 และฉันได้รับข้อผิดพลาดในคอนโซล: ไม่สามารถผูกกับ 'ngModel' ได้เนื่องจากไม่ใช่คุณสมบัติที่รู้จักของ 'อินพุต' ฉันจะแก้ไขปัญหานี้ได้อย่างไร

296 angular  typescript  angular-ngmodel  angular-forms