angular-components

问题 If I have a custom directive ParentDirective and custom component ChildComponent arranged like so: <div appParent> <app-child></app-child> </div> ...then I can use @ContentChild in the directive to refer to the component: @ContentChild(ChildComponent) child: ChildComponent; See this StackBlitz where this is working. (It logs to the console to show that the child member is set). However, if I change appParent into a structural directive, then the child member is never set. <div *appParent>

问题 I am learning Angular and am creating components dynamically on the click of a button. I am trying to use Angular Material's drag and drop feature to drag these created components to sort them. I have the following code in my base component html: <div cdkDropList style="margin: 20px" (cdkDropListDropped)="drop($event)"> <div #container></div> </div> And the Typescript code has the following code: @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef; const

问题 I have the following markup to display any component within a lightbox: <lightbox> <some-comp></some-comp> </lightbox> I am trying to find the more generic and Angular way for both components to communicate (I have read https://angular.io/guide/component-interaction). For instance, the child component might say to the lightbox: My content is large so you need to expand. I contain a form and here is the data submitted via the form. Etc. IMPORTANT. The lightbox doesn't know in advance which

问题 I am attempting to use angular-ui-router on an angular 1 project. The issue that I'm running into is that I can get angular-ui-router to work when I specify a template, but not when I specify a component. For instance, this works: var groceryListRoutes = function($stateProvider) { var listOfGroceryLists = { name: 'listOfGroceryLists', url: '/lists', template: '<grocery-list-component></grocery-list-component>', }; $stateProvider.state(listOfGroceryLists); }; However, when I attempt to specify

问题 This is in continuation of the previous question I asked on SO: Add directives to component selector when it is declared - Angular 7 I am dynamically creating components on a button click. The components are displayed one below another in a list like manner. I want to introduce drag-drop behaviour so that the user can rearrange the components after creating them. In the previous question, I tried using Angular-Material, but realised it might not be possible to use it for components, due to

问题 How to refresh data in different component 1 when changes made in component 2. These two components are not under same parentnode. customer.service.ts export class UserManagementService extends RestService { private BASE_URL_UM: string = '/portal/admin'; private headers = new HttpHeaders({ 'Authorization': localStorage.getItem('token'), 'Content-Type': 'application/json' }); constructor(protected injector: Injector, protected httpClient: HttpClient) { super(injector); } getEapGroupList():

问题 I have this directive, that i would like to make a component angular.module('app') .directive('year', function () { var controller = ['$scope', function ($scope) { $scope.setYear = function (val) { $scope.selectedyear = val; } }]; return { restrict: 'E', controller: controller, templateUrl: "views/year.html" }; }); This is what I got so far: angular.module('app') .component('year', { restrict: 'E', controller: controller, templateUrl: "views/year.html" }); I am not sure how to move my var

问题 I'm trying to extract the logic that filters and displays my mat-option s for my mat-select s into their own component. For some reason however, the options get displayed but clicking on them doesn't fire an event. The web app I'm writing have a lot of mat-select s which each potentially have a lot of mat-option s. For obvious reasons, I need a way to filter the options so I'm using this node package. This pattern of "select with search field" appears a lot throughout the application, which

问题 I try to build a reusable list which displays elements of type T. The view of these elements depends on T. To break this dependency I decided to also pass the view component. E.g. The list contains elements of type "Car". The view passing to this list is used to display the attributes ".ps" and ".color" of each element. Sadly, I am a Newbie in Angular and I can't figure how to do this right. I would like to do something like this: generic-list.ts export class GenericListComponent<T> { @Input(

问题 I have a number of angular 1.5 components that all take the same attributes and data structure. I think they could be re-factored into a single component, but I need a way to dynamically choose a template based upon the interpolated value of the type attribute. var myComponentDef = { bindings: { type: '<' }, templateUrl: // This should be dynamic based on interpolated type value }; angular.module('myModule').component('myComponent', myComponentDef); I can't use the templateUrl function(