javascript - Angular 4 DOM Manipulation and Search - Stack Overflow

admin管理员组

文章数量:1406060

Angular has these for DOM manipulation but I'm contemplating using jQuery for these functions: closest()/children().

So, Is there an angular function that is identical to jQuery's function closest() which basically just returns the element?

Are there any alternatives for these functions in Angular without resorting writing native JS/TS operations to achieve those things just like jQuery, which does the dirty work? Or is alright to proceed with jQuery (I'm not dealing with template manipulation anyway)? Thanks.

Update

1. The window.getComputerStyle could easily replicate jquery's css().
2. Regarding jquery's selector: closest()

<div id="ample" #zero>
  <div id="xample" #first>
    <div #x>
    </div>
    <div #y>
    </div>
  </div>
</div>

Angular has these for DOM manipulation but I'm contemplating using jQuery for these functions: closest()/children().

So, Is there an angular function that is identical to jQuery's function closest() which basically just returns the element?

Are there any alternatives for these functions in Angular without resorting writing native JS/TS operations to achieve those things just like jQuery, which does the dirty work? Or is alright to proceed with jQuery (I'm not dealing with template manipulation anyway)? Thanks.

Update

1. The window.getComputerStyle could easily replicate jquery's css().
2. Regarding jquery's selector: closest()

<div id="ample" #zero>
  <div id="xample" #first>
    <div #x>
    </div>
    <div #y>
    </div>
  </div>
</div>

I would like to know what could be an alternative operation for Angular. I could only think of making a function that traverses upward which jquery already does -give or take the DIVs and the element id are dynamically added/changed/deleted.

For example, from #y I want to know its nearest parent with an ID of ample. We know that the target element has a selector of #zero but retrieving it from div #y will take DOM traversal (which jquery simplifies using closest()) or some mapping/array operations that sorts out relations of the element which may be arduous in some point.

• javascript
• jquery
• angular

Share Improve this question Follow edited Sep 7, 2017 at 13:58 Desu asked Sep 7, 2017 at 11:23 DesuDesu 90011 gold badge1313 silver badges1818 bronze badges 3

• Most cases like this one are solved with directives, bindings and ViewChild(ren) decorator, so you likely have XY problem. The question doesn't contain any information on real case and is too broad. No, it's not ok to proceed with jQuery unless it's necessary. There's a plenty of posts on jQuery+Angular. – Estus Flask Commented Sep 7, 2017 at 12:46
• I don't know any reason why anyone should import a hole library like jQuery and only use a few methods of it. In your case the css() and closest() method of jQuery is very easy to implement yourself, therefore no need to import a hole library unless the library is tree-shakeable. – cyr_x Commented Sep 7, 2017 at 13:57
• Oh, so I DO REALLY NEED to implement this. I hoped that angular has these kind of built in functions. I just don't want to write function(s) that already exist. Thanks – Desu Commented Sep 7, 2017 at 14:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Is there is, one should avoid using jquery in Angular, here is an example how:

@Component({
    selector: 'sample',
    template: `
        <span #tref>I am span</span>
    `
})
export class SampleComponent implements AfterViewInit {
    @ViewChild("tref") tref: ElementRef;

    ngAfterViewInit(): void {
        // outputs `I am span`
        console.log(this.tref.nativeElement);
    }
}

The keywords for you to search would be Elementref and Viewchild

JQuery is very powerful pared to what Angular is exposing for DOM manipulation. Sometimes it's very useful and very hard to ignore in an Angular application.

You can install it in your project but the only problem is that jQuery can access the DOM globally without encapsulation, so if you want to use good practices you should only access/modify DOM of the ponent you are using jQuery in, if you want to access/modify DOM outside of a ponent, you should pass needed data as @Input or use events to notify other ponents as @Output.

Do not forget to declare the variable $ in your ponent if you have installed it globally because typescript does not know what $ is.

declare var $ :any;

Using Jquery is not the angular way, but there are certain times where our hands are tied, only in those situations use jQuery. Use @viewchild or @viewchildren to get the DOM element.

span My name is XXX #name >

In .ts file @ViewChildren('name') ponents: QueryList; console.log(this.ponents.toArray());

You will be able to get the DOM. If you want only DOm element use @viewchild. In case of @viewchildren it will return an array of all the DOM elements which use the same selector or template reference variable.

本文标签： javascriptAngular 4 DOM Manipulation and SearchStack Overflow