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

ฉันมีองค์ประกอบหลายอย่างที่ฉันต้องการให้ปรากฏภายใต้เงื่อนไขบางประการ ใน AngularJS ฉันจะเขียน <div ng-show="myVar">stuff</div> ฉันจะทำสิ่งนี้ใน Angular 2+ ได้อย่างไร

570 angular  angular-components  angular-template 

ไม่มีใครรู้วิธีการได้รับองค์ประกอบที่กำหนดไว้ในแม่แบบองค์ประกอบหรือไม่? พอลิเมอทำให้เป็นเรื่องง่ายด้วยและ$$$ ฉันแค่สงสัยว่าจะไปเกี่ยวกับเรื่องนี้ในเชิงมุม นำตัวอย่างจากบทช่วยสอน: import {Component} from '@angular/core'; @Component({ selector:'display', template:` <input #myname (input)="updateName(myname.value)"/> <p>My name : {{myName}}</p> ` }) export class DisplayComponent { myName: string = "Aman"; updateName(input: String) { this.myName = input; } } ฉันจะจับหรือรับการอ้างอิงของpหรือinputองค์ประกอบจากภายในคำจำกัดความของชั้นเรียนได้อย่างไร

516 angular  typescript  angular-components 

ฉันมีองค์ประกอบหลัก: <parent></parent> และฉันต้องการเติมกลุ่มนี้ด้วยองค์ประกอบลูก: <parent> <child></child> <child></child> <child></child> </parent> แม่แบบ: <div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div> แม่แบบเด็ก: <div class="child">Test</div> ตั้งแต่parentและchildเป็นสองส่วนแยกสไตล์ของพวกเขาจะถูกล็อคในขอบเขตของตัวเอง ในองค์ประกอบหลักของฉันฉันพยายามทำ: .parent .child { // Styles for child } แต่.childสไตล์ไม่ได้ถูกนำไปใช้กับchildส่วนประกอบ ฉันพยายามใช้styleUrlsเพื่อรวมparentสไตล์ชีทของchildองค์ประกอบเข้าด้วยกันเพื่อแก้ไขปัญหาขอบเขต: // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] แต่นั่นไม่ได้ช่วยลองวิธีอื่นโดยดึงchildสไตล์ชีทเข้าไปparentแต่ก็ไม่ได้ช่วยอะไร ดังนั้นคุณจะกำหนดสไตล์องค์ประกอบลูกที่รวมอยู่ในองค์ประกอบหลักได้อย่างไร

266 css  angular  angular-components 

ฉันมีองค์ประกอบใน Angular 2 เรียกว่า my-comp: <my-comp></my-comp> หนึ่งลักษณะสไตล์องค์ประกอบโฮสต์ขององค์ประกอบนี้ใน Angular 2 ได้อย่างไร ในพอลิเมอร์คุณจะต้องใช้ตัวเลือก ": host" ฉันลองเป็นแบบ Angular 2 แต่มันไม่ทำงาน :host { display: block; width: 100%; height: 100%; } ฉันยังลองใช้ส่วนประกอบเป็นตัวเลือก: my-comp { display: block; width: 100%; height: 100%; } วิธีการทั้งสองดูเหมือนจะไม่ทำงาน ขอบคุณ

189 css  angular  css-selectors  angular-components 

มีทางลัดใด ๆ ในการเปลี่ยนชื่อส่วนประกอบด้วย Angular CLI นอกเหนือจากการแก้ไขไฟล์คอมโพเนนต์ทั้งหมดด้วยตนเองเช่นชื่อโฟลเดอร์, .css, .ts, spec.ts และ app.module.ts หรือไม่

178 angular  angular-cli  rename  angular-components 

ฉันกำลังพยายามใช้ส่วนประกอบที่ฉันสร้างขึ้นภายใน AppModule ในโมดูลอื่น ๆ ฉันได้รับข้อผิดพลาดต่อไปนี้: "Uncaught (ตามสัญญา): ข้อผิดพลาด: ข้อผิดพลาดในการแยกวิเคราะห์เทมเพลต: "contact-box" ไม่ใช่องค์ประกอบที่รู้จัก: หาก 'contact-box' เป็นส่วนประกอบเชิงมุมให้ตรวจสอบว่าเป็นส่วนหนึ่งของโมดูลนี้ หาก "contact-box" เป็นเว็บคอมโพเนนต์ให้เพิ่ม "CUSTOM_ELEMENTS_SCHEMA" ใน "@ NgModule.schemas" ของคอมโพเนนต์นี้เพื่อระงับข้อความนี้ โครงสร้างโครงการของฉันค่อนข้างง่าย: ฉันเก็บเพจของฉันไว้ในไดเร็กทอรีเพจโดยแต่ละเพจจะถูกเก็บไว้ในโมดูลที่แตกต่างกัน (เช่นโมดูลลูกค้า) และแต่ละโมดูลมีส่วนประกอบหลายอย่าง (เช่นส่วนประกอบรายการลูกค้าลูกค้าเพิ่มส่วนประกอบและอื่น ๆ ) ฉันต้องการใช้ ContactBoxComponent ของฉันภายในส่วนประกอบเหล่านั้น (ตัวอย่างเช่นในส่วนเพิ่มของลูกค้า) อย่างที่คุณเห็นฉันสร้างส่วนประกอบกล่องผู้ติดต่อภายในไดเร็กทอรีวิดเจ็ตดังนั้นโดยพื้นฐานแล้วมันจะอยู่ภายใน AppModule ฉันเพิ่มการนำเข้า ContactBoxComponent ไปยัง app.module.ts และวางไว้ในรายการประกาศของ AppModule ไม่ได้ผลดังนั้นฉันจึงแก้ไขปัญหาของฉันและเพิ่ม ContactBoxComponent เพื่อส่งออกรายการด้วย ไม่ได้ช่วย ฉันยังลองใส่ ContactBoxComponent ใน customersAddComponent แล้วใส่อีกอันหนึ่ง …

135 angular  typescript  angular-components  angular-module 

ฉันกำลังทำงานในIonicแอป ( 2.0.0-rc0) angular 2ซึ่งขึ้นอยู่กับ ดังนั้นการแนะนำใหม่ngModulesจึงรวมอยู่ด้วย ฉันกำลังเพิ่มapp.module.ts.ด้านล่างของฉัน import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { Users } from '../pages/users/users'; @NgModule({ declarations: [ MyApp, Users ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, Users ] }) …

132 angular  angular-components  angular-module 

ฉันได้สร้างส่วนประกอบลูกซึ่งมีวิธีการที่ฉันต้องการเรียกใช้ เมื่อฉันเรียกใช้วิธีนี้มันจะยิงconsole.log()เส้นเท่านั้นมันจะไม่ตั้งค่าtestคุณสมบัติ ?? ด้านล่างนี้คือแอป Angular เริ่มต้นอย่างรวดเร็วพร้อมการเปลี่ยนแปลงของฉัน ผู้ปกครอง import { Component } from '@angular/core'; import { NotifyComponent } from './notify.component'; @Component({ selector: 'my-app', template: ` <button (click)="submit()">Call Child Component Method</button> ` }) export class AppComponent { private notify: NotifyComponent; constructor() { this.notify = new NotifyComponent(); } submit(): void { // execute …

130 angular  typescript  angular-components 

ฉันกำลังพยายามสร้างส่วนประกอบที่กำหนดเองโดยใช้หลาย ๆ ตัวng-contentใน Angular 6 แต่มันใช้ไม่ได้และฉันไม่รู้ว่าทำไม นี่คือรหัสส่วนประกอบของฉัน: <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> ฉันกำลังพยายามใช้ส่วนประกอบนี้ในที่อื่นและแสดงโค้ด HTML ที่แตกต่างกันสองรายการภายในbodyและส่วนหัวselectของng-contentสิ่งนี้: <div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng-content</div> แต่คอมโพเนนต์กำลังแสดงผลว่างเปล่า พวกคุณรู้ไหมว่าฉันทำอะไรผิดหรืออะไรคือวิธีที่ดีที่สุดในการแสดงสองส่วนที่แตกต่างกันในองค์ประกอบเดียวกัน ขอบคุณ!

104 angular  angular6  angular-components  ng-content