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

ฉันใช้ angular 2 กับกลยุทธ์ hashlocation ส่วนประกอบถูกโหลดด้วยเส้นทางนั้น: "departments/:id/employees" ดีมาก หลังจากที่ฉันทำการบันทึกเป็นกลุ่มสำเร็จของแถวตารางที่แก้ไขหลายแถวฉันต้องการโหลด url เส้นทางปัจจุบันซ้ำผ่าน: this.router.navigate([`departments/${this.id}/employees`]); แต่ไม่มีอะไรเกิดขึ้นทำไม?

156 angular 

เมื่อเร็ว ๆ นี้ฉันได้เริ่มเล่นกับ angular 2 มันยอดเยี่ยมมาก angular-cliดังนั้นฉันได้เริ่มโครงการสาธิตส่วนตัวเพื่อประโยชน์ของการเรียนรู้โดยใช้ ด้วยการตั้งค่าการกำหนดเส้นทางพื้นฐานตอนนี้ฉันต้องการนำทางไปยังบางเส้นทางจากส่วนหัว แต่เนื่องจากส่วนหัวของฉันเป็นพาเรนต์ไปยังส่วนหัวrouter-outletฉันจึงได้รับข้อผิดพลาดนี้ app.component.html <app-header></app-header> // Trying to navigate from this component <router-outlet></router-outlet> <app-footer></app-footer> header.component.html <a [routerLink]="['/signin']">Sign in</a> ตอนนี้ฉันเข้าใจบางส่วนฉันเดาว่าเนื่องจากส่วนประกอบนั้นเป็นกระดาษห่อหุ้มรอบ ๆrouter-outletจึงไม่สามารถเข้าถึงได้ด้วยวิธีrouterนี้ ดังนั้นจึงมีความเป็นไปได้ที่จะเข้าถึงการนำทางจากภายนอกสำหรับสถานการณ์เช่นนี้หรือไม่? ฉันยินดีเป็นอย่างยิ่งที่จะเพิ่มข้อมูลเพิ่มเติมหากจำเป็น ขอบคุณล่วงหน้า. อัปเดต 1- ของฉันpackage.jsonมี@angular/router 3.3.1เวอร์ชันเสถียรอยู่แล้ว 2- ในappโมดูลหลักของฉันฉันได้นำเข้าไฟล์routing-module. โปรดดูที่ด้านล่าง. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import …

156 angular  typescript  angular2-routing 

ฉันเจอไวยากรณ์ที่ได้รับมอบหมายแปลก ๆ ภายในเทมเพลต Angular 2 <template let-col let-car="rowData" pTemplate="body"> <span [style.color]="car[col.field]">{{car[col.field]}}</span> </template> ปรากฏว่าlet-colและlet-car="rowData"สร้างตัวแปรใหม่สองตัวcolและcarจากนั้นสามารถผูกไว้กับภายในแม่แบบ ที่มา: https://www.primefaces.org/primeng/#/datatable/templating let-*ไวยากรณ์มหัศจรรย์นี้เรียกว่าอะไร? มันทำงานยังไง? ความแตกต่างระหว่างlet-somethingและlet-something="something else"คืออะไร?

155 angular  angular2-template  primeng 

ฉันมีสององค์ประกอบดังนี้และฉันต้องการเรียกใช้ฟังก์ชั่นจากส่วนประกอบอื่น ส่วนประกอบทั้งสองจะรวมอยู่ในองค์ประกอบหลักที่สามโดยใช้คำสั่ง องค์ประกอบที่ 1: @component( selector:'com1' ) export class com1{ function1(){...} } องค์ประกอบที่ 2: @component( selector:'com2' ) export class com2{ function2(){... // i want to call function 1 from com1 here } } ฉันลองใช้@inputแล้ว@outputแต่ฉันไม่เข้าใจวิธีการใช้งานและวิธีการเรียกใช้ฟังก์ชั่นนั้นอย่างแน่นอนใคร ๆ ก็สามารถช่วยได้?

154 angular  angular2-components 

ในเชิงมุมฉันอาจมีรูปแบบที่มีลักษณะดังนี้: <ng-form> <label>First Name</label> <input type="text" ng-model="model.first_name"> <label>Last Name</label> <input type="text" ng-model="model.last_name"> </ng-form> ภายในตัวควบคุมที่สอดคล้องกันฉันสามารถดูการเปลี่ยนแปลงเนื้อหาของฟอร์มนั้นได้อย่างง่ายดาย: function($scope) { $scope.model = {}; $scope.$watch('model', () => { // Model has updated }, true); } นี่คือตัวอย่างเชิงมุมบน JSFiddle ฉันมีปัญหาในการหาวิธีการทำสิ่งเดียวกันใน Angular เห็นได้ชัดว่าเราไม่มี$scope$ rootScope อีกต่อไป แน่นอนมีวิธีซึ่งสิ่งเดียวกันสามารถทำได้? นี่คือตัวอย่างเชิงมุมบน Plunker

151 angular 

ฉันอ่านการอ้างอิงด่วนของ Angular 1 ถึง 2 ในเว็บไซต์ Angularและสิ่งหนึ่งที่ฉันไม่เข้าใจอย่างสมบูรณ์คือความแตกต่างระหว่างอักขระพิเศษเหล่านี้ ตัวอย่างหนึ่งที่ใช้เครื่องหมายดอกจัน: <tr *ngFor="#movie of movies"> <td>{{movie.title}}</td> </tr> ฉันเข้าใจที่นี่ว่าสัญลักษณ์แฮช (#) กำหนดmovieเป็นตัวแปรเทมเพลตท้องถิ่น แต่เครื่องหมายดอกจันก่อนหน้าngForหมายถึงอะไร และจำเป็นหรือไม่ ถัดไปคือตัวอย่างที่ใช้ตัวยึด: <a [routerLink]="['Movies']">Movies</a> ฉันค่อนข้างเข้าใจว่าเครื่องหมายวงเล็บอยู่รอบ ๆrouterLinkผูกกับแอตทริบิวต์ HTML นั้น / คำสั่งเชิงมุม นี่หมายความว่าพวกมันเป็นตัวชี้สำหรับ Angular เพื่อประเมินการแสดงออก? ชอบ[id]="movieId"ที่จะเป็นเทียบเท่าid="movie-{{movieId}}"ในเชิงมุม 1? ท้ายสุดคือวงเล็บ: <button (click)="toggleImage($event)"> สิ่งเหล่านี้ใช้สำหรับเหตุการณ์ DOM เท่านั้นและเราสามารถใช้กิจกรรมอื่น ๆ เช่น (load)="someFn()"หรือ(mouseenter)="someFn()"? ฉันเดาว่าคำถามจริงคือสัญลักษณ์เหล่านี้มีความหมายพิเศษใน Angular 2 และวิธีที่ง่ายที่สุดที่จะรู้ว่าเมื่อใดควรใช้แต่ละอัน ? ขอบคุณ !!

151 angular 

ฉันมีโมดูลนี้ซึ่งประกอบห้องสมุดภายนอกพร้อมกับตรรกะเพิ่มเติมโดยไม่ต้องเพิ่ม<script>แท็กลงใน index.html: import 'http://external.com/path/file.js' //import '../js/file.js' @Component({ selector: 'my-app', template: ` <script src="http://iknow.com/this/does/not/work/either/file.js"></script> <div>Template</div>` }) export class MyAppComponent {...} ฉันสังเกตเห็นว่าimportข้อมูลจำเพาะโดย ES6 นั้นเป็นแบบสแตติกและได้รับการแก้ไขระหว่างการถ่ายทำ TypeScript แทนที่จะใช้งานจริง ยังไงก็ตามเพื่อให้สามารถกำหนดค่าได้ดังนั้น file.js จะโหลดจาก CDN หรือโฟลเดอร์ในเครื่องใช่ไหม จะบอก Angular 2 ให้โหลดสคริปต์ได้อย่างไร

150 javascript  angular  typescript  ecmascript-6 

ng-container มีการกล่าวถึงในเอกสารประกอบ Angular 2 แต่ไม่มีคำอธิบายวิธีการทำงานและกรณีการใช้งาน มันถูกกล่าวถึงโดยเฉพาะในngPluralและngSwitchคำสั่ง ไม่<ng-container>ทำสิ่งเดียวกันเป็น<template>หรือมันขึ้นอยู่กับว่ามีคำสั่งเป็นลายลักษณ์อักษรที่จะใช้อย่างใดอย่างหนึ่งของพวกเขา? เป็น <ng-container *ngPluralCase="'=0'">there is nothing</ng-container> และ <template [ngPluralCase]="'=0'">there is nothing</template> ควรจะเหมือนกันหรือไม่ เราจะเลือกหนึ่งในนั้นได้อย่างไร สามารถ<ng-container>ใช้ในคำสั่งกำหนดเองได้อย่างไร?

150 angular  typescript  angular2-template 

ฉันได้สร้างส่วนประกอบที่กำหนดเองซึ่งฉันวางไว้ใน for loop เช่น <div *ngFor="let view of views"> <customcomponent></customcomponent> </div> ผลลัพธ์จะเป็น: <customcomponent></customcomponent> <customcomponent></customcomponent> <customcomponent></customcomponent> ฉันต้องการทราบว่าฉันจะได้รับการอ้างอิงถึงส่วนประกอบเหล่านี้โดยใช้ไวยากรณ์ @viewchild หรือวิธีอื่น ๆ ได้อย่างไรเมื่อจำนวนส่วนประกอบเหล่านี้อาจแตกต่างกันไป เมื่อส่วนประกอบสามารถตั้งชื่อได้เช่น <customcomponent #compID></customcomponent> จากนั้นฉันสามารถอ้างอิงได้ดังนี้: @ViewChild('compID') test: CustomComponent ฉันจะอ้างอิงได้อย่างไรในเมื่อไม่เป็นเช่นนั้นเช่นอาจใช้ดัชนี (คำถามนี้ไม่เกี่ยวข้องกับการใช้ ElementRef ตามคำถามอื่น ๆ ที่ถามก่อนหน้านี้ดังที่เห็นได้จากคำตอบด้านล่าง) คำถามนี้เกี่ยวข้องกับการเข้าถึง @ViewChild หลายรายการและการใช้การสืบค้นรายการ

149 angular 

ฉันอัพเกรดโครงการ Angular 4 โดยใช้เมล็ดเชิงมุมและตอนนี้ได้รับข้อผิดพลาด พบคุณสมบัติสังเคราะห์ @panelState โปรดระบุ "BrowserAnimationsModule" หรือ "NoopAnimationsModule" ในแอปพลิเคชันของคุณ ฉันจะแก้ไขสิ่งนี้ได้อย่างไร ข้อความแสดงข้อผิดพลาดบอกอะไรฉันอย่างแน่นอน

148 angular  typescript  angular-animations 

ฉันมีJSONไฟล์ที่มีลักษณะดังต่อไปนี้: { "primaryBright": "#2DC6FB", "primaryMain": "#05B4F0", "primaryDarker": "#04A1D7", "primaryDarkest": "#048FBE", "secondaryBright": "#4CD2C0", "secondaryMain": "#00BFA5", "secondaryDarker": "#009884", "secondaryDarkest": "#007F6E", "tertiaryMain": "#FA555A", "tertiaryDarker": "#F93C42", "tertiaryDarkest": "#F9232A", "darkGrey": "#333333", "lightGrey": "#777777" } ฉันกำลังพยายามนำเข้า.tsxไฟล์ สำหรับสิ่งนี้ฉันได้เพิ่มสิ่งนี้ลงในคำจำกัดความประเภท: declare module "*.json" { const value: any; export default value; } และฉันกำลังนำเข้าแบบนี้ import colors = require('../colors.json') และในไฟล์ฉันใช้สีprimaryMainเป็นcolors.primaryMain. อย่างไรก็ตามฉันได้รับข้อผิดพลาด: ไม่มีคุณสมบัติ …

148 json  angular  typescript  angular8 

ฉันได้รับการมองหาวิธีที่จะผ่านพารามิเตอร์การค้นหาเป็นเรียก API กับใหม่HttpClientModule's HttpClientและยังไม่พบวิธีการแก้ปัญหา ด้วยHttpโมดูลเก่าคุณจะเขียนอะไรแบบนี้ getNamespaceLogs(logNamespace) { // Setup log namespace query parameter let params = new URLSearchParams(); params.set('logNamespace', logNamespace); this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params }) } ซึ่งจะส่งผลให้มีการเรียก API ไปยัง URL ต่อไปนี้: localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace อย่างไรก็ตามHttpClient get()วิธีการใหม่ไม่มีsearchคุณสมบัติดังนั้นฉันสงสัยว่าจะส่งผ่านพารามิเตอร์การสืบค้นได้อย่างไร

147 angular  typescript  http  lodash  angular-httpclient 

ฉันกำลังพยายามทดสอบองค์ประกอบเชิงมุม 4.1.0 ของฉัน - export class CellComponent implements OnInit { lines: Observable<Array<ILine>>; @Input() dep: string; @Input() embedded: boolean; @Input() dashboard: boolean; constructor( public dataService: CellService, private route: ActivatedRoute, private router: Router, private store: Store<AppStore>) { } } อย่างไรก็ตามการทดสอบ "ควรสร้าง" แบบง่ายจะทำให้เกิดข้อผิดพลาดที่เป็นความลับนี้ ... NetworkError: ล้มเหลวในการดำเนินการ 'ส่ง' ใน 'XMLHttpRequest': ล้มเหลวในการโหลด 'ng: ///DynamicTestModule/module.ngfactory.js' ดังนั้นฉันพบคำถามนี้ซึ่งแสดงให้เห็นว่าปัญหาคือองค์ประกอบมี@Input)_params …

146 angular  unit-testing  karma-jasmine  angular-cli 

ฉันมีองค์ประกอบที่กำหนดเอง: <div formControlName="surveyType"> <div *ngFor="let type of surveyTypes" (click)="onSelectType(type)" [class.selected]="type === selectedType"> <md-icon>{{ type.icon }}</md-icon> <span>{{ type.description }}</span> </div> </div> เมื่อฉันพยายามเพิ่ม formControlName ฉันได้รับข้อความแสดงข้อผิดพลาด: ข้อผิดพลาดข้อผิดพลาด: ไม่มีการเข้าถึงค่าสำหรับการควบคุมแบบฟอร์มที่มีชื่อ: 'surveyType' ฉันพยายามที่จะเพิ่มngDefaultControlไม่ประสบความสำเร็จ ดูเหมือนว่าเป็นเพราะไม่มีอินพุต / เลือก ... และฉันไม่รู้ว่าต้องทำอย่างไร ฉันต้องการผูกคลิกของฉันไปที่ formControl นี้เพื่อที่เมื่อมีคนคลิกที่การ์ดทั้งหมดที่จะผลักดัน 'ประเภท' ของฉันลงใน formControl เป็นไปได้ไหม?

146 javascript  angular  typescript  angular4-forms 

ฉันจะแสดงเวอร์ชันแอปในแอปพลิเคชันเชิงมุมได้อย่างไร เวอร์ชันควรถูกนำมาจากpackage.jsonไฟล์ { "name": "angular-app", "version": "0.0.1", ... } ในเชิงมุม 1.x ฉันมี html นี้: <p><%=version %></p> ในเชิงมุมสิ่งนี้จะไม่ถูกแสดงผลเป็นหมายเลขเวอร์ชั่น แต่แทนที่จะพิมพ์ตามที่เป็น ( <%=version %>แทน0.0.1)

146 version  angular  package.json